CODEWITHSUNDEEP
csstwitter-bootstrapaccordion
ivica
ivica

Reputation: 1428

Row inside bootstrap collapse

I'm using Bootstrap 2.3.2 for a website which contains an accordion element with one row within it. Accordion is span6 and I expected that the row will be able to contain two span3 elements but it can't. Here is my code simplified:

<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>

I was able to make them appear next to each other, but only with some nasty CSS fiddling, which only works on my screen size.

Expected behaviour: https://i.sstatic.net/i5buy.jpg Actual result: https://i.sstatic.net/7zpwP.jpg

If I put that row outside of accordion element everything looks perfect.

Upvotes: 0

Views: 4214

Answers (1)

Arnold Daniels
Arnold Daniels

Reputation: 16583

This has to do with the margins of both the accordion and the .span classes.

My tip: never use the .row class, always use the .row-fluid class. With .row-fluid, you can always split up the available width into 12 columns.

<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>

Upvotes: 3

Related Questions