Блог

Я создаю приложение с помощью Bootstrap 4. У меня есть 3 кнопки и встроенная форма, и я хочу, чтобы встроенная форма была в той же строке, что и кнопки. В настоящее время с этим кодом форма находится под кнопками. Как я могу сделать так, чтобы все было в одном русле?

 <button type="button" class="mb-2 mr-2 btn btn-primary">
    <span>Agregar</span>
</button>
<div class="d-inline dropdown">
  <button aria-haspopup="true" aria-expanded="false" id="menuUtilidades" type="button" class="mr-2 mb-2 dropdown-toggle btn btn-primary">Utilidades</button>
</div>
<div class="d-inline dropdown">
  <button aria-haspopup="true" aria-expanded="false" id="menuReportes" type="button" class="mb-2 dropdown-toggle btn btn-primary">Reportes</button>
</div>
<form class="mb-2 form-inline">
  <!-- form that should be in same line -->
</form>
 

Добавьте d-inline в свою форму

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <button type="button" class="mb-2 mr-2 btn btn-primary">
    <span>Agregar</span>
  </button>
  <div class="d-inline dropdown">
    <button aria-haspopup="true" aria-expanded="false" id="menuUtilidades" type="button"
      class="mr-2 mb-2 dropdown-toggle btn btn-primary">Utilidades</button>
  </div>
  <div class="d-inline dropdown">
    <button aria-haspopup="true" aria-expanded="false" id="menuReportes" type="button"
      class="mb-2 dropdown-toggle btn btn-primary">Reportes</button>
  </div>
  <form class="mb-2 form-inline d-inline">
    my form
  </form>
</div>