Bootstrap 4：具有 100% 宽度（或自动）的下拉主按钮（输入组 + btn 组）

Posted 2023-03-06

【中文标题】Bootstrap 4：具有 100% 宽度（或自动）的下拉主按钮（输入组 + btn 组）

【英文标题】：Bootstrap 4: Dropdown main button (input-group + btn-group) with 100% width (or auto)

【发布时间】：2017-10-09 15:57:54

【问题描述】：

输入组中的按钮宽度存在问题。我正在使用 Bootstrap 4.0.0-alpha.6 (Flexbox)。

这就是我所拥有的。

这就是我想要的。

这是代码。

<div class="input-group mb-3">
    <span class="input-group-addon"><i class="fa fa-sort fa-fw"></i></span>
    <span class="input-group-btn">
        <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>
            <div class="dropdown-menu">
                <a class="dropdown-item active" href="#">Name</a>
                <a class="dropdown-item" href="#">Author</a>
                <a class="dropdown-item" href="#">NewDark version</a>
                <a class="dropdown-item" href="#">Related game</a>
                <a class="dropdown-item" href="#">First release date</a>
                <a class="dropdown-item" href="#">Last update date</a>
            </div>
        </div>
    </span>
    <span class="input-group-btn"><button type="button" class="btn btn-secondary active"><i class="fa fa-sort-amount-asc fa-fw"></i></button></span>
    <span class="input-group-btn"><button type="button" class="btn btn-secondary"><i class="fa fa-sort-amount-desc fa-fw"></i></button></span>
</div>

有人知道如何自动修复此按钮的宽度吗？也许有一个特定的 Flexbox 属性？

<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>

---

引导代码： http://www.bootply.com/DRLKMrc99S

【问题讨论】：

在工作（使用 cdn jquery 等）代码 sn-p 中提供它是个好主意。

@Sylogista bootply.com/DRLKMrc99S

【参考方案1】：

我添加了 btn-block 和 text-left 类。在similar question 上查看更多信息。

<div class="container">
  <div class="row">
    <div class="col">
      <div class="input-group mb-3">
        <span class="input-group-addon"><i class="fa fa-search fa-fw"></i></span>
        <input class="form-control" placeholder="Just type something..." type="text">
        <span class="input-group-addon input-group-addon-clear wdh-4-rem">
          <div class="loaded">100</div>
        </span>
      </div>
      <div class="input-group mb-3">
        <span class="input-group-addon"><i class="fa fa-sort fa-fw"></i></span>
        <span class="input-group-btn btn-block">
          <div class="btn-group btn-block">
            <button type="button" class="btn btn-secondary btn-block dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>
            <div class="dropdown-menu btn-block">
              <a class="dropdown-item active" href="#">Name</a>
              <a class="dropdown-item" href="#">Author</a>
              <a class="dropdown-item" href="#">NewDark version</a>
              <a class="dropdown-item" href="#">Related game</a>
              <a class="dropdown-item" href="#">First release date</a>
              <a class="dropdown-item" href="#">Last update date</a>
            </div>
          </div>
        </span>
        <span class="input-group-btn"><button type="button" class="btn btn-secondary active"><i class="fa fa-sort-amount-asc fa-fw"></i></button></span>
        <span class="input-group-btn"><button type="button" class="btn btn-secondary"><i class="fa fa-sort-amount-desc fa-fw"></i></button></span>
      </div>
    </div>
  </div>
</div>

http://www.bootply.com/PFOMxDHJoL