CSS / Bootstrap样式问题

Question

I'm trying to configure a content section of my site but I'm having trouble with the bootstrap grid system.

See my bootly example: http://www.bootply.com/121304

In my website design, i use a column-lg-3 and a column-lg-9 within a row class. To serve as a Help section and Content Area. In the content area on the majority of my pages, i use the whole column-lg-9. However in a few of my pages, i use horizontally aligned forms, such as login page (dont know ajax to get login modal working..) and input forms. On the pages with the input forms i wish to keep the column-lg-9 at its proper size, but have the login/input fields centered into it.

I have attempted to do this with a small amount of success, after reading some of the bootstrap documentation, by adding 3 column-lg-3's inside of the column-lg-9. As you can see in my bootply example, this has not fully centered the login form inside of the larger column, and ideally I would also like to center this form inside its parent column.

Answer 1

Create a new class eg .col-centered and apply it to whatever column you want centered eg

<div class="col-lg-3 col-centered">

CSS

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

Also, by looking at your code, it seems like you are trying to use empty <div class="col-lg-3"></div> to offset. That is incorrect. You don't use empty divs to achieve this.

You use offset classes such as <div class="col-lg-3 col-lg-offset-6">...</div> Documentation

Answer 2

您只需要删除float: left从受影响的DIVS的CSS中删除