Как сделать так, чтобы раскрывающийся список занимал доступную ширину в группе ввода?

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.

По умолчанию текст находится в центре. Но если вы хотите выровнять его по левой или правой стороне, используйте text-left или text-right после w-100. Посетите эту ссылку , для получения дополнительной информации

Шаг 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

Answer 2

Вы можете сделать контейнер выпадающего меню гибким, а затем сделать раскрывающийся список, чтобы заполнить все пространство:

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

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