Question

我正在使用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>

Answer 1

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

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

您可以在此处找到工作代码http://bootply.com/92723

中心浮动使用Twitter Bootstrap离开div

1 个答案: