Самозагрузка 4 кол выровняйте вправо с мл-авто - PullRequest
0 голосов
/ 15 апреля 2019

Я хочу выровнять навигацию вправо, но использование .ml-auto с .d-flex не работает, и я не понимаю, почему.

<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">
    <div class="col-lg-3">
      <form action="">
      <input type="text" placeholder="Искать по имени" class="form-control">
      </form>
    </div>
    
 <div class="col-lg-9"

        <ul class="nav nav-pills justify-content-end">
        <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>
  

Ответы [ 2 ]

0 голосов
/ 16 апреля 2019

Если вы проверяете элементы, между столбцами нет «пустого» пространства для добавления поля, поскольку оба столбца используют полные 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>
0 голосов
/ 16 апреля 2019

Поскольку Bootstrap 4.x уже применяет макет Flexbox к своему навигационному компоненту, вам необходимо полагаться на утилиты выравнивания, ориентированные на Flexbox.Для описанного поведения, которое вы запрашиваете, вы можете выбрать только один дополнительный класс: justify-content-end

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<ul class="nav nav-pills justify-content-end">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
</ul>

Bootstrap 4.x имеет множество различных утилит выравнивания, которые лучше всего работают с Flexbox или с более простыми местами размещения.Я настоятельно рекомендую ознакомиться с его документацией для , обосновывая и выравнивая содержимое Flexbox

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...