这种布局在引导列系统中是否可行？答案

【问题标题】：Is this layout possible within the bootstrap column system?这种布局在引导列系统中是否可行？
【发布时间】：2021-10-03 13:57:54
【问题描述】：

我正在使用 bootstrap 5，但 bootstrap 4 示例可能就足够了。

显然，我可以通过不使用引导程序来实现这种布局，但这不是我想要弄清楚的。我想知道我是否在引导系统中遗漏了一些我没有使用的东西。

首先，这是我要查找的内容的屏幕截图。

布局规范：

容器宽度：1440px
网格装订线宽度：32px
14列布局

每次尝试都会出现问题：

第一次尝试（参见下面的代码）和问题：孤儿（在最后一行）居中对齐。它们不会左对齐。

第二次尝试（参见下面的代码）：父级（现在是 12 列布局）太小，所以列不够宽。该设计要求列宽为 370 像素。

第三次尝试（参见下面的代码）：不适用于包装列（显然）。

第一次尝试代码：

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
        </div>
    </div>

第二次尝试代码：

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-14 col-lg-12">
                <div class="row">
                    <div class="col-14 col-md-7 col-lg-4"></div>
                    <div class="col-14 col-md-7 col-lg-4"></div>
                    <div class="col-14 col-md-7 col-lg-4"></div>
                </div>
            </div>
        </div>
    </div>

第三次尝试代码：

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-14 d-none d-xl-block col-xl-1"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 d-none d-xl-block col-xl-1"></div>
        </div>
    </div>

重申一下，只寻找引导解决方案。我可以在没有引导程序的情况下实现这一点，但我想看看我是否遗漏了什么。

【问题讨论】：

我不相信网格支持“col-14”的类名，但是您可以只使用“col”并拥有许多列。您可以将它们放在一个 div 中，并按照网格设置中的指定设置最大宽度和其他修饰符。 getbootstrap.com/docs/4.0/layout/grid 。我曾经使用网格在页面上使用重复的“col”类制作数百个图标。 codepen.io/josdea/pen/owEbag
@Dean 如果你为 bootstrap 配置 14 列，那么col-14 就是容器宽度的 100%。
14 7 4 和 12 6 3 将呈现与 3 2 1 相同的效果。间隔列看起来像水平填充。寻找 14 列布局可能是错误的问题/答案。很抱歉没有提供更多帮助，我不明白，了解您对 14 列基础的需求。我的英语有时太一般了；）

标签： css twitter-bootstrap bootstrap-4 bootstrap-5

【解决方案1】：

我不确定您为什么要使用响应式断点，但还要寻找特定的像素宽度。但是，您应该能够使用嵌套布局和 me-auto (margin-right: auto) 将孤立的列强制向左。

<div class="container">
    <div class="row">
        <div class="col-md-1 border"><!--spacer--></div>
        <div class="col-md">
            <div class="row justify-content-center border">
                <div class="col-14 col-md-7 col-lg-4">
                    <div class="border">col</div>
                </div>
                <div class="col-14 col-md-7 col-lg-4">
                    <div class="border">col</div>
                </div>
                <div class="col-14 col-md-7 col-lg-4">
                    <div class="border">col</div>
                </div>
                <div class="col-14 col-md-7 col-lg-4 me-lg-auto me-0">
                    <div class="border">col</div>
                </div>
            </div>
        </div>
        <div class="col-md-1 border"><!--spacer--></div>
    </div>
</div>

https://codeply.com/p/f2yCtBhfmf

编辑：自动边距会将列向左推太远，因为 14 不能除以 3。因此 14 列的布局是不可能的。

【讨论】：

我听到了...在特定的断点处，我希望列（及其内部内容）与 comp 上的确切宽度匹配。所以，你说得对，它是一个响应式布局，而且这些宽度会改变。
虽然这并没有解决我的问题，但它确信我需要更改 col-lg-4（在这种情况下）类来实现我正在寻找的布局。所以，我的情况可能更极端。

【解决方案2】：

根据 Bootstrap，列在父 .container 的页面上居中。然后 .row 然后是您选择的列大小的类，例如： .col-6 或 .col col-lg-2 所以也许试试

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

这是来自他们的示例https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：