Bootstrap 3 栏居中 responsive centered columns

An easy solution to center multiple columns in Bootstrap 3, also on mobile

 

The Problem

Sometimes you want to center Bootstrap columns, usually when you have an uneven number of them, or when you give them a max-width and they don't fill up the containing row.

 

The Solution

Demo and source code

 

The Markup

Just add the class .row-centered to the row and .col-centered to the columns.

<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
    </div>
</div>

 

The Css

This simple css code centers the columns (.col-centered) inside the row (.row-centered).

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

 

You can also set a min-width, a max-width or a fixed width to the columns.

.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}

 

IE8 Support

The code works also on IE8 only if you make Bootstrap 3 work on IE8. To make it work you need to use Respond.js and follow the respond.js guidelines:

• Change the Bootstrap 3 Css netdna.bootstrapcdn.com to a local file: Respond.js only works with local Css files unless additional steps are taken.
• Change the Css from a style element to an external local Css with link rel="stylesheet": Respond.js doesn't parse Css referenced via @import, nor does it work with media queries within style elements.
• Reference the Respond.js script after all of your Css.

 

原文：http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

转自：Bootstrap 3 栏居中 responsive centered columns