使用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。水平居中我使用引导项目

回答

相关问题