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列宽的列，然后使用＃34; 2列填充＆＃34;在左边和右边。

我的问题可能听起来像其他人，但由于填充而独特。如何正确地进行此布局？

Answer 1

Bootstrap有一个聪明（但精致）的排水沟系统，为所有设备上的内容提供“自然”（margin s + padding s ¹

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

列是.row s ²
内容放在列

这就是为什么，如果你想将.row置于另一个.row内（为了进一步划分你的一个cols），你必须使用这个标记：

<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的排水沟（在第4版中），需要在no-gutters上应用.row课程。

²这是“一般原则”，而不是“严格规则”。允许（甚至推荐）其他元素作为.row的直接子元素（例如column breaks）。另一方面，其他元素从.row s延伸（例如.form-row s），从而继承了排水沟系统并成为有效的列父母。

Answer 2

.row不应该是另一个.row的直接孩子
.col*不应该是另一个.col*的直接孩子

来自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?

使用Bootstrap 4的行内有多行

2 个答案: