Bootstrap 3/4 列排水沟答案

【问题标题】：Bootstrap 3/4 Column GuttersBootstrap 3/4 列排水沟
【发布时间】：2020-05-22 23:10:15
【问题描述】：

好的，所以在使用 Bootstrap 构建网站时，您会使用很多列，例如 col-md-4、col-md-3、col-md-6 等...

当您有不使用列网格的行时，这些行将始终与其余内容不一致，因为列在每侧创建一个 15 像素的装订线，然后您最终会得到一个与其他内容不一致的网站当您组合使用列的行和行时的行...

避免这种情况的最佳做法是什么？

您是否应该将 col-md-12 用于列结构之外的任何内容，或者是否有一些很棒的 CSS 可以解决问题？

告诉我，

谢谢。

如果需要，我将添加一个更详细的示例。

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

您可以在行内使用col，这是避免这种情况的最简单方法

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>

  <body>
      <div class="container">
        <div class="row" style="height: 50vh;">
            <div class="col-6 bg-primary text-center">col-6</div>
            <div class="col-6 bg-success text-center">col-6</div>
          </div>
          <div class="row" style="height: 50vh;">
            <div class="col bg-warning text-center">col</div> <!-- Here it is -->
          </div> 
      </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

【讨论】：