css - Bootstrap - 我无法将我的五两列居中放置在十二列内的十列内

标签 css twitter-bootstrap

我无法在十二列中的十列中将我的五个两列居中。 http://jsfiddle.net/p8znkgv2/ .我尝试了以下“解决方案”但没有任何运气:

<div class="container">
<div class="row">
<div class="col-sm-12">
    <div class="col-sm-1"> </div>
    <div class="col-sm-10 col-centered">
        <div class="col-sm-2">Coontent</div>
        <div class="col-sm-2">Coontent</div>
        <div class="col-sm-2">Coontent</div>
        <div class="col-sm-2">Coontent</div>
        <div class="col-sm-2">Coontent</div>
    </div>
    </div>
    <div class="col-sm-1"> </div>
</div>

.col-centered{ margin: auto; float: none; }
  • 将容器设为表格,每列设为表格单元格元素(失败)
  • 使容器(10 列)不 float 并带有自动边距。 (在大型显示器上失败)

那么如何让每两列在十列中居中,而十列在十二列中居中呢?

最佳答案

So how can I center each two column inside the ten column with the ten column centered inside the twelve column?

通过使用 .col-sm-offset-* 类。可以在此处找到示例。 http://getbootstrap.com/css/#grid-offsetting .这也是一个 fiddle 。 http://jsfiddle.net/yongchuc/m12cysv1/

关于css - Bootstrap - 我无法将我的五两列居中放置在十二列内的十列内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32231883/

相关文章:

html - Bootstrap 3.1.1 导航栏最大化输入在 3.2.0 中不再最大化

html - 如何为 NReco PdfGenerator 垂直对齐 HTML 标签中的文本

html - 媒体查询 block 显示 :none issue

css - 在 CSS 中相对于另一个元素定位一个元素

Android:外部网站和 CSS 使用自定义字体 (Arial) 的 WebView

css - bootstrap modal如何在里面加载http文件

Css z-index 不能与 bootstrap 一起正常工作

css - 给背景图像一个不透明度值

twitter-bootstrap - Bootstrap 3 表单元素对齐

twitter-bootstrap - 如何将 Twitter Bootstrap 模式分为两部分