Bootstrap列没有正确破坏

Question

我的引导列正在断开，因此在sm视图端口上，一行上有两列，下一行上有一列。在xs视图端口上，每列都相互堆叠。

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;
    }

小视口：

额外的小视口

Answer 1

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您的margin-right: 10px;正在破坏列。

Answer 2

  

注意：无需提供margin-right: 10px;

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

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

Answer 3

你要覆盖bootstrap列的边距。避免将这些类与任何自定义样式混合（边框也会在某些浏览器中混淆宽度）;相反，将自定义样式嵌套在列中：

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

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

<link href="https://maxcdn.bootstrapcdn.com/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>

Answer 4

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

<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>

Answer 5

我在Chrome和Mozila浏览器上检查了两次，但它没有破坏。 您只需要执行适当的浏览器刷新。 您的代码没有错误，无需删除margin-right：10px;

无论你是否使用此代码，它都不会影响。