Bootstrap 4在一行中的多行答案

【问题标题】：Multiple rows inside a row with Bootstrap 4Bootstrap 4在一行中的多行
【发布时间】：2017-03-02 13:23:55
【问题描述】：

我正在尝试使用 Bootstrap 创建一个全宽页面。我有一个类似这样的设置：

<body>
    <div class="container-fluid">
        <div class="row">
            The first row goes here
        </div>
        <div class="row">
            The second row goes here
        </div>
        <div class="row">
            The third row goes here
        </div>
    </div>
</body>

如果我想在一行中创建一行，我该怎么做？这就是我想要实现的目标：

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="row text-center">
                <h1>Some title</h1>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-4">
                    Grid perhaps
                </div>
                <div class="col-md-4">
                    More grid
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
</body>

所以基本上我想把标题放在一行，一些网格放在另一行。这里棘手的部分是，我想在中间放置一些 4 列宽的列，然后在左右两侧放置“2 列填充”。

我的问题可能听起来像其他问题，但由于填充是独一无二的。如何正确制作此布局？

【问题讨论】：

Bootstrap: Multiple nested rows within row?的可能重复
@Mattonit 不适用于我的做法。
那么你目前的代码有什么问题？
@MortenMoulder — 一个接一个的行是有意义的。 <row></row><row></row><row></row>。行inside 彼此没有。 <row><row></row><row></row></row>
不是一行。它是行的集合。行集合没有 Bootstrap 特定的类。可能你使用一个普通的 div。可能是一个部分。可能您根本不需要添加任何额外的标记：除非您打算对其进行样式设置或使用 JS 访问它，否则没有多大意义。

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

【解决方案1】：

Bootstrap 有一个智能（但精致）的排水沟系统，可为所有设备上的内容提供“自然”（margins + paddings）¹。

这个系统基于两个简单的假设：

列是.rows 的直接子级²
内容放在列内

这就是为什么，如果你想将 .row 放在另一个 .row 中（进一步划分你的一个列），你必须使用这个标记：

<div class="row">
  <div class="col-12">
     <div class="row">
        <div class="col-md-4 offset-md-2">
           Grid perhaps
        </div>
        <div class="col-md-4">
           More grid
        </div>
     </div>
  </div>
</div>

上述内容本身并没有多大意义（您可以只使用子行的标记，您会得到相同的结果）。但是当您想要偏移（或限制）布局的整个区域时，它很有用，如下所示：

<div class="row">
  <div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
     <div class="row">
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
     </div>
  </div>
</div>

请参阅this fiddle 以获取实时示例。

¹要摆脱 Bootstrap 的排水沟（在 v4 中），需要在 .row 上应用 no-gutters 类。

²这是“一般原则”，而不是“严格规则”。允许（甚至推荐）其他元素作为.rows 的直接子元素（例如column breaks）。另一方面，其他元素从.rows 扩展而来（例如.form-rows），因此继承了装订线系统并成为有效的列父级。

【讨论】：

jsfiddle.net/L1uq1mxn/2 - 这并没有给我想要的结果。
当然不是。您忘了提及您正在使用 Bootstra 4，它仍在 alpha 中！ Try this
它在标题和标签中字面意思是 Bootstrap 4……它被提到了两次。
好吧，我的错。我错过了那一点。更新了我的答案。
@MortenMoulder 这是一个例子：jsfiddle.net/L1uq1mxn/5不客气。快乐编码！ :: } ::)

【解决方案2】：

.row 不应该是另一个 .row 的立即孩子
.col* 不应该是另一个 .col* 的 immediate 孩子

来自 Bootstrap 文档：

"内容应该放在列中，并且只有列可以行的直接子代。”

我不明白你为什么认为你需要连续一行，以及只使用没有嵌套row 的布局有什么问题。你知道col-12 是一整行的宽度吗？

<div class="container-fluid">
    <div class="row">
        <div class="col-12 text-center">
            <h1>Some title</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">

        </div>
        <div class="col-md-4">
            Grid perhaps
        </div>
        <div class="col-md-4">
            More grid
        </div>
        <div class="col-md-2">

        </div>
    </div>
</div>

http://www.codeply.com/go/jfrWn4QDf1

Bootstrap 4，同样的规则适用：

"行是列的包装。每列都有水平填充（称为排水沟）用于控制它们之间的空间......在网格中布局，内容必须放置在列中，并且只能放置列行的直接子代” __ Bootstrap 4.1 Docs

链接：Columns must be immediate children of rows?

【讨论】：

引用“内容应该放在列中，并且只有列可以是行的直接子级。”它适用于引导程序 3 而不是 4，如果我是错的或对的，请您确认一下 :)
两个版本都一样
您的 codeply 帮我解决了工作中的一个问题，谢谢！