如何在两个 col-sm-6 网格框中给出边距？

Question

<div class="container">
  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">    
    <h3 id="chicken">Chicken</h3>
    ...
  </section>
  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">    
    <h3 id="beef">Beef</h3>
    ...
  </section>

我想在位于 col-sm-6 中的两个框之间给出一些边距。

我还希望两个盒子的长度与最后一个 col-sm-12 盒子匹配得很好。

我怎么能做到这一点？ 如果我给这样的利润，

    @media (min-width: 768px) and (max-width: 991px) {
  section {
    margin-right: 2%;
  }
}

然后第二个盒子掉了..

感谢您的支持，我解决了！

<div class="container">
    <h2>Our Menu</h2>
    <br><br>
    <div class="col-md-12 col-sm-6 col-xs-12">
      <div class="eachmenu">
        <h3>Chicken</h3>
        ...
      </div>
    </div>
    <div class="col-md-12 col-sm-6 col-xs-12">
      <div class="eachmenu">
        <h3>Beef</h3>
         ...
      </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="eachmenu">
        <h3>Sushi</h3>
           ...
      </div>
    </div>
</div> <!-- container-->

也改变了 css 文件..

.eachmenu {
  position: relative;
  height: auto;
  background-color: rgb(47, 218, 146);
  float: left;
  border: 1px solid black;
  margin-bottom: 20px;
  padding-left: 2%;
  padding-right: 2%;
}

/* START SM */
@media (min-width: 768px) and (max-width: 991px) {
  .eachmenu {
    margin-right: 2%; => I erased it (it didn't match when 6-6-12 }
}
/* End SM */

和...

（已编辑）（已删除边距右：媒体查询中的 2% => 现在匹配良好）

Answer 1

在部分上使用样式是非常危险的，因为它会影响代码的任何部分。 最好将 class 归类，并将其放在您需要的地方。 此外，还有一个非常具体的@media属性，它仅适用于 768 到 991px 之间的宽度。

编辑

我从屏幕截图中看到您的目标是设置边框，或者该部分周围的颜色。 通常您首先设置网站的网格或骨架，然后您可以在里面玩。 这是因为否则你将永远与间距作斗争。

  .right-space {
      margin-right: 2%;
  }

和

  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">   
   <div class="right-space">My content</div>

如您所见，该部分将定义我们可以移动的空间，然后我在其中的 div 将包含边框、装饰和内容，因此它将相应地调整更大的容器。

Answer 2

您可以使用不带数字的 col-class， col-可以使用断点（ .col-sm 、 .col-md 、 .col-lg 、 .col-xl ）以及m （用于边距）class 以及断点和你需要的价值。 您的两个列的大小相同，内置 class 应该没有自定义 CSS （参见相等列）。

可能的例子：

 section { background: gray;/* see us */ }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <section class="eachmenu col-md-12 my-2 col-sm mr-sm-2 col-xs mr-xs-2"> <h3 id="chicken">Chicken</h3>... </section> <section class="eachmenu col-md-12 col-sm my-2 mx-md-0 ml-sm-2 col-xs ml-xs-2"> <h3 id="beef">Beef</h3>... </section> <section class="eachmenu col-12 my-2 "> <h3 id="duck">Duck</h3> <p class="bg-info text-white p-1"> run in full page mode, then resize the window.</p> </section> </div> </div>