如何在 Bootstrap 4 中的列之间添加边距？答案

【问题标题】：How to add margins between columns in Bootsrap4?如何在 Bootstrap 4 中的列之间添加边距？
【发布时间】：2019-05-28 12:37:27
【问题描述】：

我尝试通过使用 Bootsstrap 4 为每个部分分配 col-lg-4 或 col-lg-3 来平均排列 3 个部分列。

使用 col-lg-4 或任何总共需要 12 列的响应式组合，我在列之间没有边距。

使用 col-lg-3 时，边距变得太宽。

“container”和“container-fluid”类都会出现同样的问题。

我还尝试手动调整边距，将 mx-auto 替换为设置为 m-3 的 Bootstrap4 边距，但这并不能解决问题，因为在这种情况下，所有列都向左移动，右侧留下空白空间屏幕的一侧。

当我尝试设置边距时，问题就出现了。否则，如果没有边距，我可以毫无问题地设置 col-lg-4。例如，我会得到 3 个不错的专栏。但是一旦我设置了边距，它就变得错误了。我遵循了https://getbootstrap.com/docs/4.0/utilities/spacing/ 上的建议，但仍然没有帮助。

* {
  box-sizing: border-box;
}

body {
    font-size: 16px;
    color: black;
    background-color: #eeeeee;
    font-family: 'Oxygen', sans-serif;
  }

 .navbar {
    background-color: rgb(178, 238, 13);
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0;
  }

  #collapsibleNavbar {
    background-color: rgb(229, 243, 192);
    text-align: center;
  }
  
  .navbar-nav li a {
    color: black;
    border-style: solid;
    border-width: 1px;
  }

  .navbar-brand {
      color: black; 
      padding: 15px;
  }

  h5{
    margin-bottom: 15px;
    padding-top: 7px;
  }

  h2{
    font-size: 175%;
    margin-bottom: 30px;
    margin-top: 20px;
  }

  .paraf{
    background-color: #e6ee9c;
  }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Module 3</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<header>
    <nav class="navbar navbar-expand-md navbar-light">
            <a id="get-back" class="navbar-brand" href="#">Food, LLC</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="d-lg-none d-md-none navbar-nav">
                      <li class="nav-item">
                        <a class="nav-link" href="#chicken">Chicken</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#beef">Beef</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#sushi">Sushi</a>
                      </li> 
                    </ul>
                  </div>
    </nav>
    
        
</header>
<h2 class="text-center"> Our Menu </h2>

<div class="container">
<div class="row">

<div class="col-lg-4 col-md-6 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="chicken">Chicken</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi, 
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam 
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi, 
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam 
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros. <br> (End of Chicken section) <a href="#get-back">Back to Top</a></p></div>

<div class="col-lg-4 col-md-6 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="beef">Beef</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi, 
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam 
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi, 
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam 
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.<br>(End of Beef section) <a href="#get-back">Back to Top</a></p></div>

<div class="col-lg-4 col-md-12 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="sushi">Sushi</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi, 
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam 
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi, 
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam 
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.<br>(End of Sushi section) <a href="#get-back">Back to Top</a></p></div>
</div>
</div>



</body>
</html>

您能否建议如何解决此问题并获得列之间的边距。

【问题讨论】：

标签： html css responsive-design bootstrap-4

【解决方案1】：

您可以在使用 padding 的同时使用 col-lg-4，这样它们看起来就像是分开的并显示为：

<div class="col-lg-4 px-1 (other classes...)">
</div>
<div class="col-lg-4 px-1 (other classes...)">
</div>
<div class="col-lg-4 px-1 (other classes...)">
</div>

【讨论】：

感谢阿德尔的考虑。如果背景是白色的，那将起作用。不幸的是，在我的情况下，列 div 的背景是彩色的，并且填充没有帮助。
您可以删除应用于列的颜色并在每列内创建一个容器流体，该容器将应用背景颜色

【解决方案2】：

只需在您的班级中添加mt-2 和mb-2 col-md-3。

【讨论】：

感谢 Irawan 的考虑。这将对 col-md-3 有所帮助，但 col-lg-4 该怎么办？问题依然存在。
如果你想按列间隔，你可以在 col-lg-4 中添加 col-lg-12 所以

【解决方案3】：

<div class="col-lg-4">
<div class="col-lg-12">
 your content 1
</div>
</div>

<div class="col-lg-4">
<div class="col-lg-12">
your content 2
</div>
</div>

<div class="col-lg-4">
<div class="col-lg-12">
your content 3
</div>
</div>

所以只需在 col-lg-4 中添加 col-lg-12

【讨论】：

谢谢伊拉万。我会尝试这种方法。由于我需要让页面响应不同的大小，如果我想在 lg 类之外添加 md 和 sm 类该怎么办？