垂直分组与自适应分组

垂直分组与自适应分组

---

垂直分组

1.设置垂直分组

<div class="btn-group-vertical">

  <button type="button" class="btn btn-default">按钮组</button>

  <button type="button" class="btn btn-default">按钮组</button>

  <button type="button" class="btn btn-default">按钮组</button>

</div>

2.运行效果

---

自适应分组

1.自适应按钮分组实例

//我们做一个栅格

  <div class="row">

  <div class="col-sm-6">

   //占了6格

  <div class=" btn-group btn-group-justified">

//如果不设置btn-group按钮之间就会有间隔

//btn-group-justified意思是让这个容器里面的按钮填满容器

 <div class="btn-group">

<button type="button" class="btn btn-default">按钮组</button>

  </div>

//把每一个按组钮都放到一个按钮组里去,这样浏览器兼容比较好

     <div class="btn-group">

<button type="button" class="btn btn-default">按钮组</button>

 </div>

 <div class="btn-group">

<button type="button" class="btn btn-default">按钮组</button>

 </div>

//也就是说这是一个按钮组，按钮组里面又有三个按钮组。

</div>

  </div>

 </div>

2.运行效果