Question

我知道Stackoverflow上已经存在类似的问题，但我认为确切的问题不存在。

大多数人说

“您应该将.row放在.container中，并且.col应该用.row包裹起来。”

但是我不是很完美。

我知道我应该用.col将.row包装起来但是我必须用.row或.container包装.container-fluid吗？

这是强制性的吗？

我认为下面的代码在网格系统中可以很好地工作。

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <!--
    <div class="container-fluid">
    -->
  <div class="row">
    <div class="col-md-6 col-sm-4">
      A
    </div>
    <div class="col-md-6 col-sm-4">
      B
    </div>
    <div class="col-md-6 col-sm-4">
      C
    </div>
    <div class="col-md-6 col-sm-6">
      D
    </div>
  </div>
  <!--
    </div>
    -->
</body>

</html>

Answer 1

container和container-fluid为添加到row的负边距提供必要的水平填充（15px）。

如果您将row放在水平填充小于15像素的元素内，则它将水平溢出。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- with container -->
<div class="border container mb-2">
  <div class="row">
    <div class="col-sm border">
      One of three columns
    </div>
    <div class="col-sm border">
      One of three columns
    </div>
    <div class="col-sm border">
      One of three columns
    </div>
  </div>
</div>
<!-- no padding, this one will be messed up -->
<div class="border p-0 mb-2">
  <div class="row">
    <div class="col-sm border">
      One of three columns
    </div>
    <div class="col-sm border">
      One of three columns
    </div>
    <div class="col-sm border">
      One of three columns
    </div>
  </div>
</div>
<!-- with enough padding -->
<div class="border px-5 mb-2">
  <div class="row">
    <div class="col-sm border">
      One of three columns
    </div>
    <div class="col-sm border">
      One of three columns
    </div>
    <div class="col-sm border">
      One of three columns
    </div>
  </div>
</div>

Answer 2

无需将容器或容器流体作为.row的父级

但是，您知道.row的左右边距为-15px，因此您需要一个父级，左右边距为15px，如果不使用该行，则会导致行溢出。

但是如果您的父母左右两边至少有15px或更多的填充，那么您就很好了。

我必须在网格系统中使用容器或容器流体吗？

2 个答案: