Bootstrap 4: 100% 宽度（或自动）的下拉主按钮（input-group + btn-group）

Question

我对 输入组 中的按钮宽度有疑问。我正在使用 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

Answer 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

Bootstrap 4: 100% 宽度（或自动）的下拉主按钮（input-group + btn-group）

Bootstrap 4: Dropdown main button (input-group + btn-group) with 100% width (or auto)

css

button

width

flexbox

twitter-bootstrap