1

我正在使用 Bootstrap v3.0.2。我想显示一系列彼此相邻的div，float：left然后将该组居中在一个全宽行中。我得到的是 div 彼此相邻排列，但整个组向左浮动。

我已经尝试了该站点的许多建议，但无法使它们中的任何一个起作用。

我有 HTML：

<div id="wrapper">
    <div class="container">
        <div id="wrapBoxRow" class="row">
            <div id="boxRow" class="col-md-12 col-xs-12">
                <div id="boxWrap">
                    <div class="smallBox"></div>
                    <div class="smallBox"></div>
                    <div class="smallBox"></div>
                    <div class="smallBox"></div>
                    <div class="smallBox"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

    #boxWrap, #boxRow, #wrapBoxRow
    {
        float: none;
        margin: 0 auto;
    }
    .smallBox
    {
        border: 3px solid #ddd;
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 12px;
    }

我在没有引导程序的情况下尝试过这个，也无法让它工作：

<div id="boxWrap">
    <div class="smallBox"></div>
    <div class="smallBox"></div>
    <div class="smallBox"></div>
    <div class="smallBox"></div>
    <div class="smallBox"></div>
</div>
4

1 回答 1

3

请尝试使用以下 CSS 将您的 div 水平居中

 #boxWrap, #boxRow, #wrapBoxRow
    {
        display: table;
        margin: 0 auto;
    }

你可以在这里找到工作代码http://bootply.com/92723

于 2013-11-08T10:54:09.393 回答