使用Bootstrap 4的行内有多行

Question

使用Bootstrap 4的行内有多行

Mor*_*der 5 html css twitter-bootstrap twitter-bootstrap-4

我正在尝试使用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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

我的问题可能听起来像其他人,但由于填充,它是独一无二的.如何正确地进行此布局？

Answer 1

And*_*hiu 13

Bootstrap有一个智能(但精致)的排水沟系统,为所有设备上的内容提供"自然"(margins + paddings)¹.

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

列是.rows ^2的直接子项
内容放在列中

这就是为什么,如果你想把一个.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>

Run Code Online (Sandbox Code Playgroud)

上面的内容本身没有多大意义(你可以使用子行的标记,你会得到相同的结果).但是当你想要偏移(或限制)布局的整个区域时它很有用,如下所示:

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

Run Code Online (Sandbox Code Playgroud)

看一下这个小提琴的实例.

¹要摆脱Bootstrap的排水沟(在第4节中),需要应用no-gutters课程.row.

²这是 "一般原则",而不是 "严格规则".允许(甚至推荐)其他元素作为.rows的直接子元素(例如列分隔符).在另一端,其他元素从.rows(例如.form-rows)延伸,从而继承了排水沟系统并成为有效的列父项.

Answer 2

Zim*_*Zim 6

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

Run Code Online (Sandbox Code Playgroud)

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

Bootstrap 4，同样的规则适用：

“行是列的包装器。每列都有用于控制它们之间空间的水平填充（称为装订线）...在网格布局中，必须将内容放置在列中，并且只有列可以是行的直接子代” __ Bootstrap 4.1文件

链接：列必须是行的直接子代吗？

归档时间：	8 年，12 月前
查看次数：	20907 次
最近记录：	6 年，9 月前