使用CSS。水平居中我使用引導項目

數量可變的，我有一個行內的div的可變量與COL-SM-4使用CSS。水平居中我使用引導項目

它看起來很棒時，其3的倍數：

<section> 
    <div class="row"> 
     <div class="col-sm-4">Content</div> 
     <div class="col-sm-4">Content</div> 
     <div class="col-sm-4">Content</div> 
     <div class="col-sm-4">Content</div> 
    </div> 
</section>

但任何其他情況下，我離開漂浮的項目。

這工作時，國防部爲1：

.row div:last-child{ 
    float: none; 
    margin: auto; 
}

但國防部2我不能找到一種方法。如果我將這兩個浮標都應用於兩者之中，那麼它們就會一個在另一個下。

來源

2017-08-02 Aschab

Flexbox，就可能會在這裏遇到你覆蓋。

.row { 
    display: flex; 
    justify-content: center; 
}

雖然不太熟悉Bootstrap，但它很可能會破壞東西。

來源

2017-08-02 17:06:21 Emonadeo

它打破的東西，但是這會導致我在正確的方向。謝謝。 – Aschab

引導電網是基於12，所以你不能使用你的代碼試試這個

<section> 
    <div class="row"> 
     <div class="col-sm-3">Content</div> 
     <div class="col-sm-3">Content</div> 
     <div class="col-sm-3">Content</div> 
     <div class="col-sm-3">Content</div> 
    </div> 
</section>

來源

2017-08-02 17:05:11

.row div:nth-child(4n+1) { 
    float: none; 
    margin: auto; 
    clear:left; 
}

試試這個....或者類似的東西

來源

2017-08-02 17:18:28 jidexl21

使用CSS。水平居中我使用引導項目

回答

相關問題