html - 如何使下拉菜单在输入组中采用可用宽度？

Question

我有一行包含 2 列，第一个包含标题，第二个包含输入组。

输入组有一个图标和一个下拉菜单。我的问题是下拉菜单不采用可用宽度(而选择示例则采用)。

jsfiddle:https://jsfiddle.net/326qay2p/1/

代码:

<div class="container-fluid limited">
  <div class="row">
    <div class="col-md-8 col-xl-9 col-sm-12 d-flex align-items-center bg-info">
      <h4 class="font-weight-bold d-inline mb-0"></h4>
      <small class="text-muted ml-1">(0)</small>
    </div>
    <div class="col-md-4 col-xl-3 col-sm-12 bg-danger">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1"><i class="fas fa-sort-amount-down"></i></span>
        </div>
        <div class="dropdown">
          <button class="btn dropdown-toggle" href="#" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我希望包含下拉列表的输入组占据列中的所有可用宽度。我试着调整宽度，但它把一切都搞砸了..

Answer 1

您可以使 dropdown 占据其父级的整个宽度，而无需使用 custom CSS。

升级到 Bootstrap 4.1.1，如果您还没有使用的话。然后，将 flex-grow-1 类添加到 dropdown 元素并将 w-100 添加到 dropdown-toggle元素。

默认情况下，文本位于中心。但是如果你想在左边或右边对齐，在w-100之后使用text-left或者text-right。访问此link , 更多信息

第一步

<div class="dropdown flex-grow-1">

第二步

<button class="btn dropdown-toggle w-100 text-left" href="#" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet"/>
<div class="container-fluid limited">
  <div class="row">
    <div class="col-md-8 col-xl-9 col-sm-12 d-flex align-items-center bg-info">
      <h4 class="font-weight-bold d-inline mb-0"></h4>
      <small class="text-muted ml-1">(0)</small>
    </div>
    <div class="col-md-4 col-xl-3 col-sm-12 bg-danger">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1"><i class="fas fa-sort-amount-down"></i></span>
        </div>
        <div class="dropdown flex-grow-1">
          <button class="btn dropdown-toggle w-100 text-left" href="#" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

检查 full-width-dropdown在 Codepen 上