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:

http://jsfiddle.net/f39r8/

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%;     } } 

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


Comments

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -

php - Dynamic url re-writing using htaccess -