CODEWITHSUNDEEP
csstwitter-bootstrap
Mike Holler
Mike Holler

Reputation: 975

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.

Upvotes: 4

Views: 4457

Answers (3)

sshaw
sshaw

Reputation: 1014

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

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362290

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/

Upvotes: 2

Brandon K
Brandon K

Reputation: 761

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.

Upvotes: 0

Related Questions