如何在bootstrap中行coll中心？ [英] How to center colls in row in bootstrap?

问题描述

我需要将浏览器窗口划分为两个流体行，这样无论大小如何，它们都会在整个屏幕上展开。在第一行，我需要添加应该自动居中的不同列。基本上看起来像这样：

I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:

问题是，我不能将cols置于第一行，并且行不会伸展到浏览器高度。我的代码如下所示：

The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:

<div class="container-fluid">
    <div class="row" style="text-align:center">
        <div class="col-md-3">.col-md-1</div>
        <div class="col-md-3">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
    </div>
</div>

推荐答案

您可以使用偏移中心div

You can use offset to center div

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

您可以更改bloc之间的空格填充。

And you can change padding for ajust space between blocs.

查看小提示 http://jsfiddle.net/JtzE6/

这篇关于如何在bootstrap中行coll中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！