Question

我有7个col-xs（12-7 = 5），我无法将其作为中心。

.col-centered{
float: none;
margin: 0 auto;
}

干什么

    .col-centered {
    display:inline-block;
    float:none;
    text-align:left;
    margin-right:-4px;
    }

工作，但我不能仅为一个col-xs使用保证金; /

Answer 1

7个相等的中心列很难使用标准的Bootstrap，因为7不是12的偶数因子。唯一的方法是使用嵌套，偏移或自定义CSS。如果您想避免使用自定义网格（使用LESS或SASS进行自定义）。

以下是一些选项......

7居中col- {x} -1使用嵌套＆amp;偏移量：

<div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="row"> <div class="col-sm-1 col-sm-offset-3">.</div> <div class="col-sm-1">.</div> <div class="col-sm-1">.</div> <div class="col-sm-1">.</div> <div class="col-sm-1">.</div> <div class="col-sm-1">.</div> <div class="col-sm-1">.</div> </div> </div> </div> </div>

Demo & other examples for Bootstrap 3

如果您考虑使用Bootstrap 4，由于基于flexbox的网格，奇数列现在更容易： 5,7 or 9, etc.. columns with Bootstrap 4

Answer 2

您可以使用flexbox来实现它。

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-1 col-sm-offset-3">.</div>
        <div class="col-sm-1">.</div>
        <div class="col-sm-1">.</div>
        <div class="col-sm-1">.</div>
        <div class="col-sm-1">.</div>
        <div class="col-sm-1">.</div>
        <div class="col-sm-1">.</div>
    </div> 
</div>

和样式

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

中心7 col-xs连续

2 个答案: