Блог

Я пытаюсь отобразить два или три div в одной строке, но они всегда отображаются в двух. Вот мой jsfiddle, и код приведен ниже. Два блока кода одинаковы, за исключением того, что во втором используются два div, так как я думал, что это может иметь значение, но это не так. Как мне сделать все это в одной строке в Bootstrap4, используя row / col?

     <div class="row justify-content-center"> 
      <div class="col-3 d-inline-block">Title</div>     
      <form>
        <div class="col-2 d-inline-block">Search
           <input type="text" name="search">
        </div>
      </form>
    </div>     
     
    <div class="row justify-content-center"> 
      <div class="col-3 d-inline-block">Title</div>     
      <form>
        <div class="col-2 d-inline-block">Search</div>
        <div class="col d-inline-block"><input type="text" name="search"></div>
      </form>
     </div>    
  

Строки ( .row ) и столбцы ( .col-* ) начальной загрузки создаются с помощью flex box. Столбцы должны быть прямыми дочерними элементами строк, чтобы они вступали в силу. Тот факт, что у вас есть <form /> , который переносит метку поиска и ввод прерывает это.

Если вы хотите создать встроенную форму, для .form-inline этой цели есть класс:https://getbootstrap.com/docs/4.5/components/forms/#inline-forms

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

 <div class="container">    
    <div class="row justify-content-center align-items-center"> 
        <div class="col-3">Title</div>     
        <form class="form-inline">
            <label for="search" class="mr-2">Search</label>
            <input id="search" type="text" name="search" class="form-control" />
        </form>
    </div>    
</div>
  

• .align-items-center : элементы в строке должны располагаться по вертикали, необязательно
• .form-inline : сделайте форму встроенной, обязательно
• .mr-2 : поместите правое поле на метку поиска, чтобы между формой и самой формой был пробел, необязательно

демонстрация: https://jsfiddle.net/davidliang2008/Lt9fy6wb/11 /