如何在兩個 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>