Columns wrapping down in when browser width is too small

Question

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.

So you want the sidebar buttons to stay next to the text instead of below it? — Cody Guldner, May 22 '13 at 01:35
Correct. Expand the window really wide in the JSFiddle. That's how I want it. — Mike Holler, May 22 '13 at 01:36

score 2 · Accepted Answer · answered May 22 '13 at 01:37

2

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/

answered May 22 '13 at 01:37

Carol Skelly

351,302
90
710
624

This worked for me. Can you explain how the `@media` query is special? I'm new to Bootstrap and I haven't seen this in CSS before. – Mike Holler May 22 '13 at 01:40
The Bootstrap responsive CSS includes @media queries based on standard desktop/tablet/mobile sizes explained here: http://twitter.github.io/bootstrap/scaffolding.html#responsive You can always override in your CSS which must follow the bootstrap-responsive.css. – Carol Skelly May 22 '13 at 01:43
1

More general info on CSS @media queries here: http://stackoverflow.com/questions/12045893/which-are-the-most-important-media-queries-to-use-in-creating-mobile-responsive – Carol Skelly May 22 '13 at 01:46

score 0 · Answer 2 · answered May 22 '13 at 01:36

I only recently began using CSS myself so I am not sure that this is the best way to go about this but it seemed to help when I tried overriding the CSS for that link you gave above: Go into the CSS stylesheet and find the section pertaining to that div tag (it appears to me to be called "#actions"). Put in min-width: 800px; and try to resize the browser window. Then adjust the pixel size to something like 400px and resize again just for comparison. By fine-tuning this you can (hopefully) get the desired behavior you are looking for.

score 0 · Answer 3 · answered May 22 '13 at 01:40

0

Try this: http://jsfiddle.net/F39R8/3/

I see you have the proper Bootstrap CSS classes in place, so I assumed that the bootstrap file you included contains CSS for the responsive layout. I removed it and added the non-responsive version (http://twitter.github.io/bootstrap/assets/css/bootstrap.css).

answered May 22 '13 at 01:40

sshaw

994
6
10

That technically answered what I asked, but what I really wanted was the responsive CSS, which as why I was using it. Skelly's answer does the trick. – Mike Holler May 22 '13 at 01:58

Columns wrapping down in when browser width is too small

3 Answers3