html - Bootstrap 列未正确中断

Question

我的 bootstrap 列坏了，因此在 sm 视口(viewport)上，一行有两列，下一列有一列。在 xs View 端口上，每列相互堆叠。

html:

<div class=" row">
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
</div>

CSS:

.sandwich-item{
    border: 2px solid #390000;
    margin-right: 10px;
}
    .sandwich-item h2 {
        font-size: 18px;
        font-weight: bold;
    }

小视口(viewport):

超小视口(viewport)

Answer 1

.sandwich-item {
  border: 2px solid #390000;
}

.sandwich-item h2 {
  font-size: 18px;
  font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" row">
  <div class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
      <h2>hello</h2>
    </div>
  </div>
  <div class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
      <h2>hello</h2>
    </div>
  </div>
  <div class="col-sm-4 col-xs-6">
    <div class="sandwich-item">
      <h2>hello</h2>
    </div>
  </div>
</div>

您的 margin-right: 10px; 会打断列。