Bootstrap 4 一行中的多行

Question

我正在尝试使用 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 列填充”。

我的问题可能听起来和其他问题一样，但由于填充而显得独一无二。如何正确设置此布局？

Answer 1

Bootstrap 有一个智能（但精致）的排水沟系统，为所有设备上的内容提供 "natural"（margins + paddings）¹.

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

列是直接的 children of .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>

以上内容本身没有多大意义（您可以只使用 child 行的标记，您会得到相同的结果）。但是当你想偏移（或限制）布局的整个区域时它很有用，就像这样：

<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 中），需要应用 no-gutters class 在 .row.

²这是"general principle"，不是"strict rule"。允许（甚至推荐）其他元素作为 .row 的直接 children（例如 column breaks）。在另一端，其他元素扩展自 .rows（例如 .form-rows），因此继承了 gutters 系统并成为有效列 parents.

Answer 2

.row 不应该是另一个 .row

直接

.col* 不应该是另一个 .col*

直接

来自 Bootstrap 文档：

"Content should be placed within columns, and only columns may be immediate children of rows."

我不明白为什么你认为你需要一行一行，只使用你的布局 w/o 嵌套 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、同理：

"Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them... In a grid layout, content must be placed within columns and only columns may be immediate children of rows" __ Bootstrap 4.1 Docs

已链接：Columns must be immediate children of rows?

Bootstrap 4 一行中的多行

Multiple rows inside a row with Bootstrap 4

html

css

twitter-bootstrap

twitter-bootstrap-4