Bootstrap 4 флажок и раскрывающийся список в строке

Question

Я использую bootstrap 4, и мне нужно добавить флажок и раскрывающееся меню внутри встроенного div. Сначала установите флажок, а затем раскрывающийся список.

Вот пример изображения того, что мне нужно:

Пример изображения:

Пример изображения

Как это сделать в Bootstrap 4?

Answer 1

Вы можете использовать bootstrap Встроенные формы или Автоматический размер столбца для этого. Попробуйте следующие два примера кода.

Со встроенными формами:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="form-inline">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input id="workflow" name="workflow" class="custom-control-input" type="checkbox">
        <label class="custom-control-label" for="workflow">Default Workflow</label>
      </div>
      <select id="dropdown" name="dropdown" class="custom-select" >
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
    </div>

С автоматическим изменением размера столбца:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <div class="form-row align-items-center">
  <div class="col-auto">
    <div class="custom-control custom-checkbox">
      <input id="workflow" name="workflow" class="custom-control-input" type="checkbox">
      <label class="custom-control-label" for="workflow">Default Workflow</label>
    </div>
  </div>
  <div class="col-auto">
    <select id="dropdown" name="dropdown" class="custom-select">
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </select>
  </div>
</div>

Answer 2

Не нужны bootstrap классы

.input-wrapper {
  display: flex;
}

label {
  margin-right: 10px;
}

<div class="input-wrapper">
  <input type="checkbox" name="checkbox" id="checkbox">
  <label for="checkbox">Default workflow</label>
  <select name="select" id="select">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>

  </select>
</div>