twitter-bootstrap - 连续居中 7 个 col-xs

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 使用嵌套和偏移:

<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