0

1行のアコーディオン要素を含むWebサイトにBootstrap 2.3.2を使用しています。アコーディオンは span6 で、行に 2 つの span3 要素を含めることができると思っていましたが、できません。これが私のコードを簡略化したものです：

<div class="span6">
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    <p><h3>Some text here</h3></p>
                </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="row">
                        <br />
                        <div class="span3 offer">
                            <div class="offer-wrap">
                                This one should be on the left
                            </div>
                        </div>
                        <div class="span3 offer">
                            <div class="offer-wrap">
                                This one should be on the right, but is BELOW
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

それらを隣り合わせに表示することはできましたが、私の画面サイズでのみ機能する厄介な CSS をいじる必要がありました。

予想される動作: http://imgur.com/O1z4mZN 実際の結果: http://imgur.com/fP568Tl

その行をアコーディオン要素の外に置くと、すべてが完璧に見えます。

4

1 に答える 1

3

これは、アコーディオンと.spanクラスの両方の余白に関係しています。

私のヒント: クラスを使用しないでください。.row常にクラスを使用して.row-fluidください。では.row-fluid、使用可能な幅をいつでも 12 列に分割できます。

<div class="span6">
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    <p><h3>Some text here</h3></p>
                </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse">
                <div class="accordion-inner">
                    <br />
                    <div class="row-fluid">
                        <div class="span6 offer">
                            <div class="offer-wrap">
                                This one should be on the left
                            </div>
                        </div>
                        <div class="span6 offer">
                            <div class="offer-wrap">
                                This one should be on the right, but is BELOW
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
于 2013-08-29T09:48:36.200 に答える