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>

Bootply代码： 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：下拉主按钮（输入组+ btn-group），宽度为100％（或自动）

1 个答案: