如何在Bootstrap中保留三列之間的空間？

Question

我已經在Stackoverflow上做了很多關於如何有效地解決這個問題的搜索，但我似乎還沒有找到我正在尋找的確切內容。

基本上，我有三列我想要均勻分布並在我的頁面中居中。 但是，當我為所有三列設置col-md-4時，最終結果是它們都是三個相互聚集的。 如何才能使列之間有空間？ 像10-15px左右，沒有強迫他們到另一行。

這是一些示例代碼：

<div class="row-fluid">
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
</div>

也許我只是做錯了什么，但我似乎無法弄清楚如何使這項工作。 我已經看到有幾個人建議將它們放入另一個帶有填充物的div中，但這對我來說似乎不起作用。

謝謝你的幫助！ 我對所有建議持開放態度！

Answer 1

實際上，您的代碼已經在列之間創建了空格，因為在引導程序中，列的每邊都有15px填充。

您的代碼正常運行，請在此處查看： http ： //www.bootply.com/H6DQGdZxGy

Answer 2

這是一個遲到的答案，但我想有些人可以通過另一種解釋來解釋。 Bootstrap“cols”系統不是用來裝飾，而是在頁面中放置元素。 如果需要空間列內容，則需要包裝內容：

<div class="row-fluid">
 <div class="col-md-4">
   <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>
 </div>
 <div class="col-md-4">
   <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>
 </div>
 <div class="col-md-4">
    <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>     
</div>

然后，您可以使用填充在“.col-spaced”上添加間距

.col-spaced {
     margin-left: 15px
}

注意：

• margin會改變列大小，因為col- *應該放在尊重列布局上
• 您可能需要更改col- *第一個和最后一個孩子來解決一些問題

Answer 3

做你想做的'hacky'方法是給列一個與背景顏色相同的邊框。

Answer 4

你可以這樣做：

[class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

[class*="col-"]:first-child {
  padding-left: 0px;
}

[class*="col-"]:last-child {
  padding-right: 0px;
}

您可以添加一個內容來包裝它，否則您將這些規則應用於布局中的所有列！

.spaced-columns [class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

那么你可以使用：

<div class="spaced-columns">
  <div class="col-md-4"> your content here</div>
  <div class="col-md-4"> your content here</div>
  <div class="col-md-4"> your content here</div>
</div>

或者你可以只創建一個類： spaced-col然后在其上添加一個填充：

.spaced-col {
  padding: 0px 10px;
}

然后你在cols上應用這個類

<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>

所以你會有你想要的間距:)

干杯

Answer 5

如果使用填充並更改背景顏色，您可能會注意到列的顏色之間沒有太多間距。 也許更好的選擇

    .col-md-4 {
        margin-left: 5px;
    }

Answer 6

您可以選擇使用列偏移col-md-offset- *。 你將無法保持列的間距（減少4到3），但我相信它應該在一定程度上完成響應間距的工作。

看看這個： twitter bootstrap網格系統。 列之間的間距

Answer 7

您可以放置​​另一個div來將您的內容放在.col div中，如下例所示：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
     </div>
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
    </div>
  </div>
</div>

看到它在這里工作： https ： //codepen.io/pmfeo/pen/RVxPXg

該div將調整為它的父級填充。