Bootstrap 3 - 如何使用偏移量在`.col-md-3`之間獲得等間距

我正在使用Bootstrap 3.3.7。小提琴這裏：https://jsfiddle.net/eLaj3ksb/Bootstrap 3 - 如何使用偏移量在`.col-md-3`之間獲得等間距

輸出看起來是這樣的：

我想要做的就是「C列」與紅色欄的右側對齊，還留着「列A」並且在「列B」之間具有相等的間距。

所以基本上我想讓它看起來像它一樣，右邊是「C列」，中間是「B列」。列A-B和B-C之間的間距相等。

我不知道哪個offset類需要使用。我想列A/B/C是相等的寬度，所以使用col-md-3。所以這加起來可以達到9.但是我用什麼offset數字來完成這項工作？

如果我在「列A」上使用.col-md-offset-1，「列C」結束於我想要的位置，但它會將「列A」從紅色列的左側推開！

我得到的東西需要加起來12 ...但是在這種情況下這怎麼可能呢？

我的列（A/B/C）上的5px灰色邊框是否會導致問題？如果是這樣，我怎麼能有這樣的邊界，並保持間距？

來源

2017-08-31 Andy

敢肯定你不能做到這一點與標準的自舉類。這不是Boottrap的工作方式。 –

是的，因爲我想這就像在A-B和B-C之間要求「col-md-1.5」一樣，這不是問題！儘管如此，這真的很有限！上面的內容位於'.col-md-12'內，因此它看起來像下面框對齊關閉。它看起來很糟糕！ – Andy

這是不可能的（據我所知）與標準的Bootstrap3類/偏移量。

Flexbox可以做到這一點，但它的確意味着覆蓋一些標準的Bootstrap 3屬性。

.flex { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.row.flex:before, 
 
.row.flex:after { 
 
    display: none; 
 
}

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

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12" style="border:1px solid red;"> 
 
      <div class="row flex"> 
 
       <div class="col-md-3" style="border:5px solid #ccc; padding: 20px; min-height: 150px;"> 
 
        <p>Column A</p> 
 
       </div>  
 
       <div class="col-md-3" style="border:5px solid #ccc; padding: 20px; min-height: 150px;"> 
 
        <p>Column B</p> 
 
       </div>  
 
       <div class="col-md-3" style="border:5px solid #ccc; padding: 20px; min-height: 150px;"> 
 
        <p>Column C</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-08-31 11:13:21

Bootstrap 3 - 如何使用偏移量在`.col-md-3`之間獲得等間距

回答

相關問題