Question

我的代码就像

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
    </div>
</div>

我想将这些9列和4列居中。用bootstrap做正确的方法是什么。对于第二种情况，我试过

<div class="row">
    <div class="col-md-2 col-md-offset-4"></div>
    <div class="col-md-2"></div>
</div>

有效。我该怎么用来居中第一排的9列。

Answer 1

您可以使用嵌套和col-*-offset-*来居中奇数列（您连续3列）。具有2列的行的情况可以使用偏移简单地居中（不需要嵌套）。使用text-center将内容置于列中。

<div class="container-fluid">
    <div class="row">
      <div class="col-md-11 col-md-offset-1">
        <div class="row">
          <div class="col-md-3 col-md-offset-1 text-center"></div>
          <div class="col-md-3 text-center"></div>
          <div class="col-md-3 text-center"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 col-md-offset-4 text-center"></div>
      <div class="col-md-2 text-center"></div>
    </div>
</div>

演示： http://bootply.com/HKy0mPMXv5

Answer 2

要真正居中9列布局，必须使用带边距的自定义CSS。

ZimSystem的解决方案很接近，但并不精确，它的屏幕宽度是屏幕宽度的1/288。也就是说，如果9列代表屏幕宽度的9/12，则列从左边开始是23/144，而从右边开始是22/144。此外，不是3个内容列是3/12，它们实际上是11/48。

正确的方法是在行中嵌套行，向内行的边添加12.5％的边距

<div class="text-center center-header">x</div>
<div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="row center-row-9">
          <div class="col-md-4 text-center">x</div>
          <div class="col-md-4 text-center">x</div>
          <div class="col-md-4 text-center">x</div>
        </div>
      </div>
    </div>
</div>

中心行-9 css只是margin: 0 12.5% 我将ZimSystem的解决方案与基于边缘的解决方案进行比较http://codepen.io/jdkahn/pen/mEoaoY

Answer 3

这对我有用。我甚至添加了左右边距，但如果需要，可以将其删除。

do

使用twitter bootstrap 3将9列布局居中

3 个答案: