Bootstrap center all columns in whole row

问题:

I'm currently creating a web page with Bootstrap and I'm using columns. My page looks like that:

I'd like to center the last column (in the second row) but the page is dynamic and I don't know how many containers there are.

I found this two solutions on Google:

1) Add this to my css:

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

2) Add this to the class tag attribute

col-lg-offset-4

But both solutions look like this:

That is not what i want. I want it to look like this:

How can i achieve this?

回答1:

Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.

Here is the trick.

.wrapper {
  background: green;
  padding: 20px 0;
}

.box {
  border-radius: 10px;
  margin-bottom: 30px;
  background: #fff;
  padding: 10px;
  color: #000;
}

.center-align {
  letter-spacing: -4px;
  text-align: center;
  font-size: 0;
}

.center-align [class*='col-'] {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  font-size: 14px;
  float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="container center-align">
    <div class="row">
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container center-align">
    <div class="row">
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.

回答2:

Bootstrap has built-in functionality to achieve the layout you are after, without the introduction of additional CSS rules. Simply use the .col-md-offset-* class:

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

Your layout would end up looking similar to this:

.show-grid {
  margin-bottom: 15px;
}

.your-custom-div {
  height: 50px;
  background-color: green;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row show-grid">
      <div class="col-md-4">
        <div class="your-custom-div">
          .col-md-4
        </div>
      </div>
      <div class="col-md-4">
        <div class="your-custom-div">
          .col-md-4
        </div>
      </div>
      <div class="col-md-4">
        <div class="your-custom-div">
          .col-md-4
        </div>
      </div>
      <div class="clearfix visible-md"></div>
    </div>
    <div class="row show-grid">
      <div class="col-md-4 col-md-offset-4">
        <div class="your-custom-div">
          .col-md-4 .col-md-offset-4
        </div>
      </div>
      <div class="clearfix visible-md"></div>
    </div>
  </div>
</body>
  
</html>

EDIT #1: For your requirement of not knowing how many columns you will be fetching from your database for the second row, another option would be to use a conditional during the output of the HTML to also output a .col-md-offset-4 class if the modulo of the number of items in your collection divided by the number of columns is equal to 1, or proceed as usual otherwise. In ASP.NET with Razor, this would look something like this (the example below is kept simple on purpose to demonstrate the proposed logic, it can be refactored to it's own HTML helper class, accounting for other column sizes as well):

@{
    bool lastItemShouldBeCentered = Foo.Count % 3 == 1;
    for (int i = 0; i < Foo.Count; i++)
    {
        bool isLastItem = i == Foo.Count - 1;
        if (isLastItem && lastItemShouldBeCentered)
        {
            <div class="col-md-4 col-md-offset-4">
                // Foo[i] content here 
            </div>
        }
        else
        {                 
            <div class="col-md-4">
                // Foo[i] content here 
            </div>
        }
    }
}

EDIT #2: Looks like I misread your requirement. For 1 left-over column, this solution will suffice. For more, I would go with @Muhammad's answer.

回答3:

You need to add the last block of text into a different row and change the "col-md-4" to "col-md-12".

<div class="row">
    <div class="col-md-4"> // column 1
        bla bla bla 
    </div>
    <div class="col-md-4"> //column 2
        bla bla bla
    </div>
    <div class="col-md-4"> // column 3
        bla bla bla
    </div>
</div>
<div class="row">
    <center>
    <div class="col-md-12"> //last column, also note I changed it to 12
        bla bla bla
    </div>  
    </center>
</div>