1

Bootstrap v3.0.2 を使用しています。一連の div を並べて表示したい場合は、float: 左に移動してから、そのグループを全幅の行の中央に配置します。私が得るのは、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 に答える