css - Columns wrapping down in when browser width is too small -
i'm looking make small sidebar using twitter bootstrap.
i want paragraph text able wrap freely , want buttons on right side. however, whenever browser resized full screen have smaller width vertical button group drops down next row , takes width of while window. ugly. can change this?
basically, i'm looking @ code this:
<div class="container"> <div class="row" style="margin-top: 10px;"> <div class="span9 citation-text"> <p class="citation-text">here ton of text supposed citation i'm hoping it'll wrap that's why it's not citation. , yet doesn't wrap looks i'll have keep writing , writing until 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 link jsfiddle:
play around resizing , you'll see i'm talking about.
once browser resized less 768px, bootstrap sets columns (span*) widths 100% , removes 'float' makes spans stack vertically. can override using @media query in css..
@media (max-width: 767px) { .row .span9 { float:left; width:68%; } .row .span3 { float:left; width:28%; } }
Comments
Post a Comment