css3 - Issue on Hiding Overflow in Bootstrap CSS -

css3 - Issue on Hiding Overflow in Bootstrap CSS -

can please take @ this demo , allow me know why css overflow:hidden rule not working .switch class? please informed not want alter thing in buttons , switch mark ups , need maintain them (must not alter col-lg-x sizes)

<div class="panel panel-default"> <div class="panel-heading">switch</div> <div class="panel-body"> <div class="row"> <div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10"> <button class="btn btn-primary norightradius col-lg-1 col-md-1 col-sm-1 col-xs-1">yes</button> <button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">new model</button> <button class="btn btn-primary noleftradius col-lg-1 col-md-1 col-sm-1 col-xs-1">no</button> </div> </div> </div> </div>

here shot of required result

the bootstrap grid scheme based upon 12 columns. if add together columns consumed yes button, title bar, , no button, you'll see you've got 13 columns.

just resize title bar 10 columns instead of 11.

change

<button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">new model</button>

to

<button class="btn btn-primary noradius col-lg-10 col-md-10 col-sm-10 col-xs-10">new model</button>

see http://jsfiddle.net/wilsonjonash/fz4cw/6/

and if you'd button hidden @ screen sizes, seek using responsive utility classes(like hidden-sm or hidden-xs): http://getbootstrap.com/css/#responsive-utilities

oh, , why wrap? bootstrap grid classes utilize float:left arrange grid items. overflow:hidden has effect of containing floats, not hiding them.

css css3 twitter-bootstrap twitter-bootstrap-3