如何在相同的“逻辑"中具有混合的流体和固定宽度的内容?柱子? [英] How to have mixed fluid and fixed-width content in the same "logical" column?

问题描述

我正在使用Bootstrap 4设计一个站点.大多数内容都存放在常规(固定宽度)容器中.但是，有些图像应该是全宽的(从边缘到边缘)，因此对于这些图像，我使用 .container-fluid .

I am designing a site using Bootstrap 4. Most of the content lives in regular (fixed width) containers; however there are some images that should be full width (edge to edge), so for these I use .container-fluid.

在一个特定页面中，我的布局看起来像这样(对于高分辨率):

In one specific page I have a layout that looks like this (for large resolutions):

图像是全角的，而文本不是全角的，所以我首先想到的是将图像放入 .container-fluid ，将文本放入常规的 .container ，像这样:

The images are full width while the text is not, so my first thought was to put the images in a .container-fluid and the text in a regular .container, like this:

<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>

但是，对于移动设备，我需要将它们堆叠起来，像这样:

However, for mobile I need these to be stacked, like this:

但这是一个不同的结构(Image1的容器流体+文本的容器+ Image2的容器流体+文本的容器).

But this would be a different structure (container-fluid for Image1 + container for text + container-fluid for Image2 + container for text).

是否有一种方法可以使用Bootstrap的网格系统来实现这一目标，而不必依靠复制内容并根据分辨率显示一个或另一个版本?(我希望避免这种情况.)

Is there a way to achieve this using Bootstrap's grid system, without resorting to duplicating the content and showing one version or the other depending on the resolution? (I would prefer to avoid this).

推荐答案

最简单的解决方案是为移动设备设计一种布局，为其他布局设计一种布局，并基于断点显示/隐藏元素，但是既然您说过，要做到这一点，那么我唯一想到的解决方案就是将 .container-fluid 作为容器，并手动为包含以下内容的2列设置 max-width 文本.

The easiest solution would be to have one layout for mobile and another for others and show/hide elements based on break points, but since you said you don't want to do that, then the only solution I could think of is to have .container-fluid as the container and manually set the max-width for those 2 columns that contain the texts.

<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 :准备将这两个缩小版本的文本居中放置在较小的断点处，当它们不采用100％宽度时向上放置.没有它，那两个部分将向左对齐.
• .order-sm-* :将它们重新排序为断点 sm 及更高版本
• p-0 :摆脱列之间的填充

• .container-fluid: to take up 100% width of the screen. It's easier to have wider container and shrink down the elements inside than have narrow container and grow the elements out of it.
• .justify-content-center: to prepare to center those 2 shrink down version of the texts on small break point and up when they're not taking 100% width. Without it, those 2 sections will be aligned left.
• .order-sm-*: to reorder them for break point sm and up
• p-0: to get rid of the paddings between columns

这里的窍门是在小断点上设置这两个文本部分的样式，最多只占用 .container 的 max-width 的一半:

The trick here is to style those 2 text sections on small break point and up to only take up half of the max-width of the .container:

/*
$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已定义了所有内容.

Now you might have noticed the way I wrote the CSS. Yes, you don't have to hard code the numbers if you're using SCSS/SASS in your project. Bootstrap has those all defined.

如果要使其动态化，就像 .col-sm-* 一样，请查看 @mixin make-col($ size，$ columns:$ grid-列)在Bootstrap安装中的\ scss \ mixins_grid.scss下.

If you want to make it so dynamic, just like .col-sm-*, take a look at the @mixin make-col($size, $columns: $grid-columns) under \scss\mixins_grid.scss in your Bootstrap installation.

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

这篇关于如何在相同的“逻辑"中具有混合的流体和固定宽度的内容?柱子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！