引導列未正確斷開

Question

我的引導程序列中斷了，因此在sm view端口上一行有兩列，而下一行有一列。 在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

 .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; 正在打破專欄。

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

您正在覆蓋引導程序列的邊距。 避免將這些類與任何自定義樣式混合使用（邊界也會在某些瀏覽器中弄亂寬度）； 而是將自定義樣式嵌套在列中：

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

不管您是否放置此代碼，它都不會受到影響。