bootstrap 对齐拆分按钮

Question

我正在尝试制作一组​​垂直的引导按钮，混合了拆分样式和普通样式。可以用普通样式，但是因为按钮的文字不同，分割按钮的宽度也不同！

有没有办法让它们完全对齐，所以它们的宽度都一样？

为了节省空间，我删除了很多下拉菜单的内容。第一个是正常的按钮下拉菜单，完全合理。第二个下拉菜单是拆分样式，需要进行调整，但如果我这样做，它会使按钮成为点击部分，宽度相同！

<div class="btn-group  btn-group-justified">
<div class="btn-group" role="group">
<button type="button" class="btn  btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-apple"></span>  Activities <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu  list-group">
<li class=" btn-sm"><a href='index.php?a=menus&amp;b=Archery' >Archery</a></li>
</ul>
</div></div>

<div class="btn-group ">
<div class="btn-group" role="group">
<button type="button" class="btn  btn-success"> Accommodation <span class="glyphicon glyphicon-home"></span> </button><button type="button" class="btn  btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
<ul class="dropdown-menu btn-info list-group">
<li class="list-group-item alert-info btn-sm"><a href='index.php?a=menus&amp;b=HUTS' >HUTS</a></li>
</ul>
</div></div>

Answer 1

HTML：

<div class="btn-group btn_grp">
  <button type="button" class="btn btn-danger center_text">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle toggle_width" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group btn_grp">
  <button type="button" class="btn btn-danger center_text">Action Testing Button</button>
  <button type="button" class="btn btn-danger dropdown-toggle toggle_width" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

CSS：

.center_text{
  width:95%
}
.toggle_width{
  width:5%;
}
.btn_grp{
  width:100%;
}

Demo Sample Code : http://jsfiddle.net/hellosrini/52VtD/13510/

Answer 2

HTML：

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">Shimla</button>
    <button type="button" class="btn btn-default">Srinagar (Summer)</button>
    <button type="button" class="btn btn-default">Uttarakhand</button>
    <button type="button" class="btn btn-default">Kerala</button>
    <button type="button" class="btn btn-default">Goa</button>
    <button type="button" class="btn btn-default">Dadra and Nagar Haveli union territory</button>
    <button type="button" class="btn btn-default">Arunachal Pradesh</button>
</div>

CSS：

.btn-group-vertical > button{
    margin-bottom:5px;
    border-radius:5px !important;
}

Sample Demo : http://jsfiddle.net/hellosrini/52VtD/13491/