Question

我对Bootstrap 3中的表单控件类感到很困惑。将表单控件类添加到简单按钮使其在较小的设备上显示宽度为100％。

如何为下拉按钮实现相同的效果？

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></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>

将表单控件添加到btn-group，按钮，或者用from-group包装它都没有区别。什么都没发生：/任何想法？

Answer 1

我不认为这些调整可以在不触及CSS的情况下完成。首先，“表单控件”类应仅应用于按钮，之后由于包装div.btn-group inline-block属性而不会延伸。

所以我们必须为小分辨率添加一个display：block触发类，即“col-xs-12”。

对于更大的屏幕，有必要在媒体查询中手动将此显示重置回内联块。

http://jsfiddle.net/EuHm5/

@media (min-width: 768px) {

  .btn-group.col-xs-12 {
    display:inline-block;    
    width:auto;  
  }
}

Bootstrap 3中带有表单控件类的下拉按钮？

1 个答案: