时间戳

首页 > 解决方案 > 如何在不换行的情况下在三个 Bootstrap 列之间添加边距？

html - 如何在不换行的情况下在三个 Bootstrap 列之间添加边距？

问题描述

.background-color {
  background-color: lightgrey;
  height: 200px;
  border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-4 background-color">1</div>
    <div class="col-4 background-color">2</div>
    <div class="col-4 background-color">3</div>
  </div>
</div>

所以我有三列，每列宽度为 4 列，每当我添加 m-3 （周围的边距）时，它们就会因此中断，我该如何包含它们？所以他们三个都在同一条线上？

.background-color {
  background-color: lightgrey;
  height: 200px;
  border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-4 background-color m-3">1</div>
    <div class="col-4 background-color m-3">2</div>
    <div class="col-4 background-color m-3">3</div>
  </div>
</div>

标签： htmlcssbootstrap-4margin

解决方案

我看到的唯一方法是嵌套其他元素。

    <div class="container">
      <div class="row">
        <div class="col-4"><div class="col-12 background-color m-3">1</div></div>
        <div class="col-4"><div class="col-12 background-color m-3">2</div></div>
        <div class="col-4"><div class="col-12 background-color m-3">3</div></div>
      </div>
    </div>

推荐阅读