css - How avoid cell wrapping in Bootstrap3 -
first, sorry quality of question, explain want achieve quite hard, that's way i've prepared sample code.
there can see 2 main columns: #main-left-column
, #main-right-column
.
on #main-right-column
i've placed 6 green cells , works bootstrap authors wants, want somehow add 'overlay-x:auto'
css property on right column avoid cell wrapping.
any idea how ?
simple,
put right <div>
(columns inside #main-right-column
) <table>
container , set minimal width.
css:
.width-300-450 { min-width:300px; width: 100%; max-width:450px }
example:
<table> <tr> <td> <div class="width-300-450"> <div class="col-xs-12 bg-success"> <h2>test</h2> </div> <div class="col-xs-12 bg-warning"> <p>...</p> </div> </div> </td> <td> <div class="width-300-450"> <div class="col-xs-12 bg-success"> <h2>test</h2> </div> <div class="col-xs-12 bg-warning"> <p>...</p> </div> </div> </td> </tr> </table>
on #main-right-column
must set overlay-x
property:
#main-right-column { overflow-x: auto; display: inline-block; padding:0; }
full example here: bootstrap fiddle
Comments
Post a Comment