Question

Busy implementing Twitter Bootstrap with the responsive CSS file included, but this causes issues with my spans. The entire width is supposed to be up to span12, and it follows that 6 * span2 should do the same.

Now here is the funny part. It DOES work if the bootstrap-responsive.css is NOT loaded, but the moment I load the responsive file, the last span floats to the bottom left.

At first I thought it might be my borders around it, but I remove them, and it still floats to the bottom.

            <div class="row" style="border: 1px solid green">
                <div class="container" style="border: 1px solid blue">
                    <div class="span2" style="border: 1px solid red">Foo!</div>
                    <div class="span2" style="border: 1px solid red">Bar!</div>
                    <div class="span2" style="border: 1px solid red">Baz!</div>
                    <div class="span2" style="border: 1px solid red">Foo!</div>
                    <div class="span2" style="border: 1px solid red">Bar!</div>
                    <div class="span2" style="border: 1px solid red">Baz!</div>
                </div>
            </div>

It should be possible to load both CSS files and get a decent layout though, right? No?

I am unable to find any other questions that indicate similar results. My Bootstrap CSS files are unmodified, and I do not have my own stylesheet build in yet, therefore I don’t think it is something I did wrong.

Any ideas?

Thanks!

Kobus

EDIT: Uploaded a screenshot for more info.

Answer 1

You may try this code below, it should not be having any issues on using bootstrap-responsive.css

<div class="row" style="border: 1px solid green">
  <div class="container" style="border: 1px solid blue; width:100%">
   <div class="span2" style="border: 1px solid red">Foo!</div>
   <div class="span2" style="border: 1px solid red">Bar!</div>
   <div class="span2" style="border: 1px solid red">Baz!</div>
   <div class="span2" style="border: 1px solid red">Foo!</div>
   <div class="span2" style="border: 1px solid red">Bar!</div>
   <div class="span2" style="border: 1px solid red">Baz!</div>
</div>
</div>

Update:

<div class="row-fluid" style="border: 1px solid green">
<div class="container" style="border: 1px solid blue">
<div class="span2" style="border: 1px solid red">Foo!</div>
<div class="span2" style="border: 1px solid red">Bar!</div>
<div class="span2" style="border: 1px solid red">Baz!</div>
<div class="span2" style="border: 1px solid red">Foo!</div>
<div class="span2" style="border: 1px solid red">Bar!</div>
<div class="span2" style="border: 1px solid red">Baz!</div>
</div>
</div>