0

我正在为一个网站使用 Bootstrap 2.3.2,该网站包含一个手风琴元素,其中有一行。Accordion 是 span6,我希望该行能够包含两个 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 回答