时间戳

首页 > 解决方案 > 我必须在网格系统中使用容器或容器流体吗？

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

问题描述

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

大多数人说

“你应该放入.row并且.container应该.col被.row“包裹起来。

但我并不完全明白。

我知道我应该用包装.col但.row 我必须.row用.containeror包装.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>

标签： javascripthtmlbootstrap-4

解决方案

container并container-fluid为添加到row.

如果你放入row一个水平填充小于 15px 的元素，它会水平溢出。

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

推荐阅读