使用twitter bootstrap 3将9列布局居中 [英] Center a 9-column layout using twitter bootstrap 3

问题描述

我的代码就像

<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列居中.用引导程序执行此操作的正确方法是什么?对于第二种情况，我尝试了

I want to center those 9columns and 4columns. what is the right way to do it with bootstrap. For second case i tried

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

有效.我应该用什么来居中第一行的9列.

It works. What should i use to center the 9column of first row.

推荐答案

您可以使用嵌套和 col-*-offset-* 将列的奇数居中(其中一行3).带有2列的行的情况可以简单地使用偏移量居中(无需嵌套).使用 text-center 将内容居中在列中.

You can use nesting and col-*-offset-* to center odd numbers of columns (where you have 3 in a row). The case of the row with 2 columns can be simply centered using offsets (no nesting required). Use text-center to center the content inside the columns.

<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

这篇关于使用twitter bootstrap 3将9列布局居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！