html - 如何在两个 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% => 现在匹配良好）

标签： htmlcsstwitter-bootstrap

Answer 1

在部分上使用样式是非常危险的，因为它会影响代码的任何部分。更好地为类赋予属性并将其放在您需要的地方。此外，还有一个@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 将包含边框、装饰和内容，因此它将相应地调整更大的容器。