Я хочу установить lo go слева и ссылки справа, но float не работает с тегом nav ... почему? - PullRequest
Новая
       12

Я хочу установить lo go слева и ссылки справа, но float не работает с тегом nav ... почему?

1 голос
/ 04 апреля 2020

Я использую этот код для навигации, а также bootstrap для своей практики

image

Как я могу установить lo go справа или слева и ссылки на другой стороне?

По умолчанию ссылка и lo go расположены рядом друг с другом, и плавание влево или вправо не работает - что мне делать?

Ответы [ 2 ]

2 голосов
/ 04 апреля 2020

.navbar использует display: flex для позиционирования своих элементов. Это означает, что вы можете изменить их расположение или расположить их, изменив flex-direction и justify-content на .navbar, но также обратите внимание на flex-grow, flex-shrink, flex-basis и поля слева и справа, установленные для каждого непосредственного потомка .navbar.

Для запуска слева направо flex-direction: row (по умолчанию). Справа налево: flex-direction: row-reverse.

Что касается перестановки пространства между ними и вокруг них, для любого из вышеперечисленного измените justify-content на любой из space-between (по умолчанию), space-evenly, flex-end, flex-start, center.

Вот пример с ними в обратном порядке и равномерно: 

nav.navbar {
  flex-direction: row-reverse;
  justify-content: space-evenly;
}
div.navbar-collapse {
  flex-grow: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">LOGO HERE</a>
  <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Примечание предостережения : гораздо больше свойств, установленных для родительского или любого из дочерних элементов, может влиять на их поведение при отображении. Некоторые из наиболее распространенных:

  • установка margin: auto для любого ребенка украдет все положительное пространство и выделит его в этот конкретный пробел, в результате чего justify-content будет казаться, что он не работает. Это работает, но его распределение точно 0 пространство. Если вы хотите разделить свободное пространство на несколько выбранных промежутков, поместите margin:auto в каждый из этих промежутков, используя любой соседний элемент.
  • значение flex-grow, flex-shrink или flex-basis на любом из дети будут влиять на их размер и, следовательно, на распределение свободного пространства. Здесь следует отметить, что по умолчанию на некоторых интервалах реагирования .navbar-collapse имеет flex-grow: 1, поэтому вам нужно установить его на 0, чтобы иметь возможность перераспределять свободное пространство. В противном случае нет свободного места.
0 голосов
/ 05 апреля 2020

Лучше использовать это: если вы хотите поместить ссылку (или другие элементы) справа, добавьте класс ml-auto к вашему элементу; и если вы хотите поместить его слева, добавьте mr-auto класс к вашему элементу.

...