Блог

Главная - Вопросы по программированию - Bootstrap — не удается выровнять X и Y в навигационной панели

Bootstrap — не удается выровнять X и Y в навигационной панели

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я хочу, чтобы навигационная панель была такой, чтобы название компании было слева, а элементы X и Y справа. Я попытался использовать justify-content-right, как предложено в документации по начальной загрузке, но это не работает.

 <header>

   <nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
      <a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>

      <!--Creates  a clickable button with a toggle icon once the screen collapses-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link text-black"  style="font-size:16px; href="x.php">X <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-black" style="font-size:16px; href="y.php">Y<a>
        </li>
       </ul>
      </div>

    </nav>
  <header>

Редактировать: я удалил класс mr-auto, и это, похоже, помогло!

Ответ №1:

Вы забыли закрыть атрибут стиля

 <header>

   <nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
      <a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>

      <!--Creates  a clickable button with a toggle icon once the screen collapses-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link text-black"  style="font-size:16px"; href="x.php">X <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-black" style="font-size:16px"; href="y.php">Y<a>
        </li>
       </ul>
      </div>

    </nav>
  <header>

Комментарии:

1. По-прежнему не работает, все, что он делает, это изменяет шрифт. Но моя проблема заключается в выравнивании элементов. Хотя спасибо.

2. @github292929 можете ли вы также добавить css-часть своего кода

3.использование документации по начальной загрузке getbootstrap.com/docs/4.0/utilities/flex getbootstrap.com/docs/4.0/components/navbar

4. @github292929 чтобы выровнять элементы навигации слева направо, добавьте это в свой css .nav-item{float: left;}

5. пробовал, не работает. Интересно, почему, потому что я даже пробовал float: right. Редактировать: я удалил mr-auto, и это, похоже, помогло!