Question

I'm new to Bootstrap and trying to implement a layout where:

a top row has some horizontally centered content, e.g. a logo image in an anchor;
the row below should contain 6 boxes, all with a fixed width and with their respective contents horizontally centered. When the viewport shrinks, I'd like these boxes to reflow like text, so that the resulting rows never contain a different number of boxes. For instance, when in XS size I just have a single box per row; when in SM, I have 2 per row; in other sizes, I have 3 per row.

I managed to get this working in this Bootply (I colored the div's so that you can easily see what's going on).

Now, I'd like the boxes in these rows to be horizontally centered along an ideal midline cutting the viewport in 2 exact halves, so that e.g. when I have 1 box per row, its center is aligned with the center of the top row anchor with its image; when I have 2 boxes, they must be at the same distance from this ideal midline; and when I have 3 boxes, the mid box should be cut in half by this midline. In a word, everything in this view should be horizontally centered, in both the rows whithin the same container div.

Given that my boxes have a fixed, predefined width (except eventually at XS size, where I just let them be 100% of the container div width, as far as their contents are horizontally centered anyway), I could try to fine tune things by hand by adding margins in media queries; but this does not seem a very robust approach, and probably would fail in several mid-resolution cases between the BS3 predefined widths (AFAIK, max 767 for xs, min 768 for sm, min 992 for md, and min 1200 for lg).

To summarize the above sample code, my HTML is like:

<div class="container">
    <div class="row" id="head">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
            <div style="position:relative">
                <div>
                    <a href="#">
                        <img alt="Head" style="width: 150px;height:150px">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-fluid" id="gallery">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 mit-box">
            <div class="center-block">
                <img alt="Alpha">
                <h3>Alpha</h3>
                <ul>
                    <li><a>Alpha item 1</a></li>
                    <li><a>Alpha item 2</a></li>
                    <li><a>The last alpha item</a></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 mit-box">
            <div class="center-block">
                <img alt="Beta">
                <h3>Beta</h3>
                <ul>
                    <li><a>Beta item 1</a></li>
                    <li><a>Beta item 2</a></li>
                    <li><a>The last beta item</a></li>
                </ul>
            </div>
        </div>
        <!-- other boxes here, up to 6 ... -->
    </div>
</div>

And my relevant styles are:

div.mit-box {
    height: 200px;
    background-color: #ffffc0;
}
@media(max-width:767px) {
    div.mit-box > div {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin: 10px;
        height:180px;
        padding-top:5px;
    }
}
@media(min-width:768px) {
    div.mit-box > div {
        display: inline-block;
        width: 285px;
        text-align: center;
        margin: 10px;
        height:180px;
        padding-top:5px;
        background-color: #c0ffc0;
    }    
}

Could anyone suggest the best strategy for a layout such this?

Answer 1

用这个替换你的风格：

div.mit-box {
    height: 200px;
    background-color: #ffffc0;
    /* add padding here */
}
div.mit-box > div {
    display: inline-block;
    width: 100%;
    text-align: center;
    height: 180px;
    padding-top: 5px;
    background-color: #c0ffc0;
}

基本上你的内部#c0ffc0彩色div现在是全宽的，并且可以通过将填充添加到外部div来处理列之间的间距。这是Bootply。

希望这有帮助。

Bootstrap: horizontally centered contents in rows with wrapping content

1 个答案: