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/

bootstrap证明分裂按钮

2 个答案: