Categories
css twitter-bootstrap

Columns wrapping down in when browser width is too small

I’m looking to make a small sidebar using Twitter Bootstrap.

I want the paragraph text to be able to wrap freely and I always want the buttons on the right side. However, whenever the browser is resized from full screen to have a smaller width the vertical button group drops down to the next row and takes up the width of the while window. Ugly. What can I do to change this?

Basically, I’m looking at code like this:

<div class="container">
<div class="row" style="margin-top: 10px;">
<div class="span9 citation-text">
<p class="citation-text">Here is a ton of text that is supposed to be a citation
but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap
so it looks like I'll have to keep writing and writing until it does.</p>
</div>
<div class="span3 vertical-btn-group citation-options">
<input type="button" class="btn btn-small btn-block btn-info citation-edit"
value="Edit" /> <input type="button" class=
"btn btn-small btn-block btn-danger citation-remove" value="Remove" />
<input type="button" class=
"btn btn-small btn-block btn-warning citation-highlight" value="Highlight" />
</div>
</div>
</div>

Here is the link to the JSFiddle:

http://jsfiddle.net/F39R8/

Play around with resizing and you’ll see what I’m talking about.

Once the browser is resized to less than 768px, Bootstrap sets all columns (span*) widths to 100% and removes the ‘float’ which makes the spans stack vertically. You can override this using a @media query in your CSS..

@media (max-width: 767px) {
.row .span9 {
float:left;
width:68%;
}
.row .span3 {
float:left;
width:28%;
}
}

http://jsfiddle.net/skelly/F39R8/2/