如何使用Twitter Bootstrap 3将两列布局居中？

我正在使用twitter引导3为一个网站，并有一个主要的内容区和侧边栏。目前，两列并排左对齐，但我希望它们能够集中放置在页面上。如何使用Twitter Bootstrap 3将两列布局居中？

我看到的那么，一列是使用CSS对准了一些解决方案：

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

这工作，但只为我的一列。我尝试将我的两列嵌套在一个大小为12的列中，并尝试将其集中，但无济于事。

我不希望删除浮动，以便在小尺寸的列将堆叠，但在所有其他大小，他们将保持并排。

这里是我使用的HTML的基本结构：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-8 col-md-7 col-lg-6"> 
     </div> 
     <aside class="col-xs-12 col-sm-4 col-md-5 col-lg-6"> 
     </aside> 
    </div> 
</div>

由于提前，

导航

来源

2013-11-21 navanitachora

http://www.bootply.com/95883使用'.row'并让每列跨越网格的一半或'6'应该这样做。 – Trevor

@Trevor谢谢我想我明白发生了什么我认为我可能需要重写容器的填充左侧和填充右侧来完成我想要的操作。 – navanitachora

通过重写的填充左和padding-正确解决了这个问题bootstrap中的.container类。

.container { 
    padding-right: 120px; 
    padding-left: 120px; 
}

它可能是bette r以百分比的方式进行上述调整，以便扩大规模。由于侧栏没有完全延伸到容器的末端，结果虽然没有居中，但我被抛弃了。

添加上面的覆盖为我做了。

非常感谢@trevor的测试床。

来源

2013-11-21 23:32:42 navanitachora

如何使用Twitter Bootstrap 3将两列布局居中？

回答

相关问题