Question

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

输入组有一个图标和一个下拉列表。我的问题是下拉列表没有占用可用的宽度（例如选择时）。

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元素。

默认情况下，文本位于中心。但是，如果您想在左侧或右侧对齐，请在text-left后使用text-right或w-100。访问此link，了解详情

第1步

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

第2步

<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>

检查Codepen上的full-width-dropdown

Answer 2

您可以将下拉列表的容器设置为Flex容器，然后使下拉列表填充所有空间：

＆＃13;

.dropdown,.dropdown .btn {
  flex:1;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">



<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 d-flex">
          <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>

＆＃13;

如何使下拉列表在输入组中占用可用宽度？

2 个答案:

第1步

第2步