如何在同一 "logical" 列中混合流动内容和固定宽度内容？

Question

我正在使用 Bootstrap 4 设计网站。大部分内容位于常规（固定宽度）容器中；但是有些图像应该是全宽（边到边），所以对于这些我使用 .container-fluid.

在一个特定的页面中，我的布局看起来像这样（对于大分辨率）：

图片是全宽的，而文字不是，所以我的第一个想法是将图片放在 .container-fluid 中，将文字放在常规 .container 中，像这样：

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <img ...>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <img ...>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col">
            Text...
        </div>
    </div>
    <div class="row">
        <div class="col">
            Text...
        </div>
    </div>
</div>

但是，对于移动设备，我需要将它们堆叠起来，如下所示：

但这将是一个不同的结构（Image1 的容器流体 + 文本的容器 + Image2 的容器流体 + 文本的容器）。

有没有一种方法可以使用 Bootstrap 的网格系统来实现这一点，而不需要复制内容并根据分辨率显示一个版本或另一个版本？（我宁愿避免这种情况）。

Answer 1

根据您希望固定宽度内容的精确程度，您可以摆脱填充实用程序类以确保页边距有足够的填充。但是您也可以使用嵌套 .row 来实现。

它不会真正固定宽度，但您可以更精细地控制大小，而对现有代码的改动相对较小。

<div class="container-fluid">
  <div class="row no-gutters">
    <div class="col-12 col-md">
      <img src="//placehold.it/500x250/&text=IMG1" class="w-100 mb-4" />
      
      <div class="row justify-content-center">
        <div class="col-10 col-md-8">
        <h4>Heading</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>          
        </div>
      </div>
    </div>
    
    <div class="col-12 col-md">
      <img src="//placehold.it/500x250/&text=IMG2" class="w-100 mb-4" />
      
      <div class="row justify-content-center">
        <div class="col-10 col-md-8">
        <h4>Heading</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>          
        </div>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

Answer 2

最简单的解决方案是为移动设备设计一个布局，为其他布局设计另一个布局，show/hide 元素基于断点，但既然你说你不想这样做，那么我唯一的解决方案可以想到的是将.container-fluid作为容器并为包含文本的那2列手动设置max-width。

布局

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-sm-6 order-sm-1 p-0">
            Image1
        </div>
        <div class="col-sm-6 order-sm-3 p-0 col-shrink">
            Heading
            Text
        </div>
        <div class="col-sm-6 order-sm-2 p-0">
            Image2
        </div>
        <div class="col-sm-6 order-sm-4 p-0 col-shrink">
            Heading
            Text
        </div>
    </div>
</div>

解释：

.container-fluid：占屏幕宽度的100%。使用较宽的容器并缩小其中的元素比使用较窄的容器并从中扩展元素更容易。
.justify-content-center：准备将这 2 个缩小版本的文本在小断点处居中，并在它们未占用 100% 宽度时向上居中。没有它，这两个部分将左对齐。
.order-sm-*：为断点重新排序 sm 及以上
p-0：去掉列之间的填充

CSS

这里的技巧是在小断点上设置这 2 个文本部分的样式，最多只占 .container 的 max-width 的一半：

/*
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);

$grid-columns: 12;

You can probably make something similar to @mixin make-col($size, $columns: $grid-columns) at
\scss\mixins\_grid.scss
*/

@media(min-width: 576px) {
    .col-shrink {
        flex-basis: calc(540px / (12/6));
        max-width: calc(540px / (12/6));
    }
}

@media(min-width: 768px) {
    .col-shrink {
        flex-basis: calc(720px / (12/6));
        max-width: calc(720px / (12/6));
    }
}

@media(min-width: 992px) {
    .col-shrink {
        flex-basis: calc(960px / (12/6));
        max-width: calc(960px / (12/6));
    }
}

@media(min-width: 1200px) {
    .col-shrink {
        flex-basis: calc(1140px / (12/6));
        max-width: calc(1140px / (12/6));
    }
}

现在您可能已经注意到我写 CSS 的方式了。是的，如果您在项目中使用 SCSS/SASS，则不必对数字进行硬编码。 Bootstrap 已定义所有内容。

如果你想让它变得如此动态，就像 .col-sm-* 一样，请查看 Bootstrap 安装中 \scss\mixins_grid.scss 下的 @mixin make-col($size, $columns: $grid-columns)。

截图

演示： https://jsfiddle.net/davidliang2008/xyaqzt67/64/

如何在同一 "logical" 列中混合流动内容和固定宽度内容？

How to have mixed fluid and fixed-width content in the same "logical" column?

css

responsive-design

twitter-bootstrap

bootstrap-4

布局

CSS

截图