I can not understand how to implement the following layout behavior.

  1. It is necessary that all elements have the same minimum width.
  2. It is necessary that the elements are exactly one above the other without displacement.
  3. Both first rules should work in the responsive version.

I can’t also understand why span6 doesn't work in the sample code, who knows why, please edit the example.

enter image description here

 @import url('https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row-fluid"> <div class="span6"> <div class="" data-toggle="buttons-radio"> <button class="btn btn-mini btn-primary" value="all"> Все</button> <button class="btn btn-mini btn-primary" value="dogs"> Собака</button> <button class="btn btn-mini btn-primary" value="cats"> Кошка</button> <button class="btn btn-mini btn-primary" value="other"> Другие</button> <button class="btn btn-mini btn-primary" value="goods"> Товары</button> <button class="btn btn-mini btn-primary" value="services"> Услуги</button> </div> </div> <div class="span6">контент</div> </div> </div>

  • for item # 1 you can use the class .btn-block - Ruslan_K
  • @Ruslan_K Probably it wasn’t quite right when I put it, It’s necessary that all the elements be of the same MINIMUM width ñ Dmitry Nail
  • horror, who else uses version 2.? Already the 4th came out! - HamSter

1 answer 1

set min-width: ... px;

 .btn-primary { min-width: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row-fluid"> <div class="span6"> <div class="" data-toggle="buttons-radio"> <button class="btn btn-mini btn-primary" value="all"> Все</button> <button class="btn btn-mini btn-primary" value="dogs"> Собака</button> <button class="btn btn-mini btn-primary" value="cats"> Кошка</button> <button class="btn btn-mini btn-primary" value="other"> Другие</button> <button class="btn btn-mini btn-primary" value="goods"> Товары</button> <button class="btn btn-mini btn-primary" value="services"> Услуги</button> </div> </div> <div class="span6">контент</div> </div> </div>

  • This decision does not fall under the condition number 3 - Dmitry Nail
  • Although if you set the alignment to the width, it is already beginning to look at least as something usable. - Dmitriy Gvozd