具有块级别的引导下拉按钮？答案

【问题标题】：Bootstrap Dropdown Button with Block Level?具有块级别的引导下拉按钮？
【发布时间】：2020-09-02 23:13:25
【问题描述】：

我正在尝试让 bootstrap 3 dropdown 按钮接受全宽（.btn-block 类）属性。下拉按钮的工作方式似乎与常规按钮的工作方式不同。这是我当前的代码：

<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-6">
    <!-- Single button -->
    <div class="btn-group">
      <button type="button" class="btn btn-primary btn-block dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-cog"></span> Dealer Tools  <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dealer Area</a></li>
         <li class="divider"></li>
         <li><a href="#"><span class="glyphicon glyphicon-phone"></span> App Registration</a></li>   
      </ul>
    </div>
    <!-- Single button -->
  </div>
  <div class="col-md-6 col-sm-6 col-xs-6">
    <a href="http://www.agrigro.com/testarea/contact-us/">
      <button type="button" class="btn btn-primary btn-block">
        <span class="glyphicon glyphicon-envelope"></span>  CONTACT US
      </button>
    </a>
  </div>
</div>

我怎样才能让它正常工作，以便下拉按钮占据完整的 col-6？

【问题讨论】：

我看到你在<a> 中有一个<button>。你不应该那样做。永远不要嵌套交互式元素。
哦？真的吗？什么会更好？将按钮类应用于 a 元素？
这取决于你想要什么。如果您希望用户单击按钮，请不要将其放在<a> 中。反之亦然。如果您想要一个链接，但让它看起来像 <button>，请仅使用 <a> 并对其应用一些样式。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将btn-block 应用于btn-group 和btn

<div class="btn-group btn-block">
  <button type="button" class="btn btn-block btn-primary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Dealer Tools  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
 <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dealer Area</a></li>
        <li class="divider"></li>
         <li><a href="#"><span class="glyphicon glyphicon-phone"></span> App Registration</a></li>   
  </ul>
</div>

演示：http://bootply.com/101166

【讨论】：

太棒了！太感谢了！附言对任何人...要使菜单下拉项也全宽，请在
中的类中添加 btn-block

【解决方案2】：

使用下拉菜单时，先将 btn-block 应用到 btn-group，然后可以添加 col-?-?在按钮的类中控制按钮部分的宽度。方便的小技巧。

 <!-- Split button -->
    <div class="btn-group btn-block">
      <button type="button" class="btn col-lg-10 btn-lg btn-danger">Action</button>
      <button type="button" class="btn col-lg-2 btn-lg btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu col-lg-12" 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>

【讨论】：

很好的答案，这是真正的引导方式！

【解决方案3】：

<div class="btn-group btn-block">
    <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
        <span class="col-lg-10">
            Button dropdown
        </span> 
        <span class="col-lg-2">
            <span class="caret"></span>
        </span>
    </button>
    <ul class="dropdown-menu btn-block" 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>

【讨论】：

【解决方案4】：

对于单按钮下拉菜单 @Skelly answer 有效。对于拆分按钮下拉菜单，我从Dave Ward的Using btn-block with Bootstrap 3 dropdown button groups得到了答案。

他使用col-*-* 作为拆分按钮

<div class="col-sm-6">
  <button class="btn btn-block btn-lg btn-success">Approve</button>
</div>

<div class="col-sm-6">
  <div class="btn-group btn-block">
    <button class="col-sm-10 btn btn-lg btn-danger">Deny</button>

    <button class="col-sm-2 btn btn-lg btn-danger dropdown-toggle"
            data-toggle="dropdown">
      <span class="caret"></span>
    </button>

    <ul class="dropdown-menu btn-block">
      <li><a href="#">Reason 1</a></li>
      <li><a href="#">Reason 2</a></li>
      <li><a href="#">Reason 3</a></li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案5】：

我有一个不同的设置，但是使用 Javascript、React Bootstrap 1.3.0 和 React 16.9.0 对我有用的是将块参数应用于 Dropdown 和 Dropdown.Toggle：

import Dropdown from 'react-bootstrap/Dropdown';
import 'bootstrap/dist/css/bootstrap.min.css';

<Dropdown block>
  <Dropdown.Toggle block> Label for the button when collapsed </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>Option 1</Dropdown.Item>
    <Dropdown.Item>Option 2</Dropdown.Item>
    <Dropdown.Item>Option 3</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

【讨论】：