Question

我已经使用Bootstrap 4个月了，我仍然不太确定。

行类的正确用法是什么？这是两个例子

第一个例子：每行只包含12列

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

第二个例子：每行基本上类似于容器类，只删除左右填充。如您所见，此行等于24列，因此它将创建2行，因为12是最大值。

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

Answer 1

使用默认的Bootstrap样式，行之间有空格（margin-bottom）。如果您想要该空间，请使用row。如果您不想在row内的元素之间添加空格，则可以根据需要添加尽可能多的col，并且它们会在您看到之后进行换行。

列包装绝对是Bootstrap的一个特性;是什么使响应式布局成为可能。

最后，您可以使用row强制进行“＃34;硬包装”，如果您的row列少于12列，并希望下一个元素总是在另一行上。

Answer 2

你是在思考问题。行类只能处理多达12列。第二个是技术上不正确的使用。第一种方法是实现row的方式。

编辑：

在文档中看到包装之后，我会说引导框架是为了适应这种情况，因为太宽的列已经被包装，但最好还是尝试将其保持为12列。如果你需要，你可以使用更多。这取决于你作为开发人员需要什么。

（将我的评论作为答案，因为它更适合作为一个答案）

Bootstrap .row类正确用法

2 个答案: