Если вы проверяете элементы, между столбцами нет «пустого» пространства для добавления поля, поскольку оба столбца используют полные 12 слотов;вместо этого вы должны поместить класс ml-auto
в элемент ul
, который не , используя всю доступную ширину, и его можно переместить в его родительский элемент;
Другой вариант на самом делеиспользование утилит flex, которые предоставляет Bootstrap, для выравнивания и выравнивания содержимого внутри flex-контейнера.
Редактировать: Поскольку вам нужно сохранить размер входных данных;вы можете установить для этого столбца значение col-auto
, при этом этот столбец будет использовать только пространство, необходимое для хранения его элементов;затем в другом столбце вы можете использовать col
, чтобы он использовал все оставшееся пространство без необходимости устанавливать определенное количество слотов;наконец, вы можете снова использовать такие гибкие утилиты, как justify-content-end
для элемента ul
, чтобы он придерживался правой стороны.
Существует много вариантов применения размера к столбцу, читайте Grid System
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="panel-form">
<div class="row justify-content-between">
<div class="col-auto">
<form action="">
<input type="text" placeholder="Искать по имени" class="form-control">
</form>
</div>
<div class="col">
<ul class="nav nav-pills justify-content-end flex-nowrap">
<li class="nav-item pl-4"><a href="#" class="nav-link active">Active</a></li>
<li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item pl-4"><a href="#" tabindex="-1" aria-disabled="true" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
</div>