как сделать nav-item вправо, не свернувшись - PullRequest
Новая
       20

как сделать nav-item вправо, не свернувшись

0 голосов
/ 06 июля 2019

привет, так что я использую bootstrap 4 и пытаюсь создать меню navbar вот мой код 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">Home</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>
    </ul>
  </div>
     <ul class="navbar-nav"><li class="nav-item">Login</li></ul>
</nav>

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

Я попытался переместить элемент, на который я хочу быть вправо, переместился после кнопки переключения, и он работает точно так, как я хочу, но на небольших устройствах и на настольном устройстве он отображается обратно влево.

Я пытался переместить элемент, на котором я хочу находиться, сразу после элемента div collapse, но он сворачивается на небольших устройствах.

1 Ответ

0 голосов
/ 06 июля 2019

Проблема была решена путем разделения навигационных панелей на два отдельных div, используя bootstrap4 row и col, и добавляя отступы к двум отдельным div.Я использовал встроенный стиль для позиционирования элемента Login, но это только для иллюстрации.Было бы лучше преобразовать встроенный стиль в класс.

 <div class="container-fluid">
    <div class="row">
        <div class="col-8 p-0">
            <nav class="navbar navbar-expand-lg navbar-light bg-light" style="height:4rem;">
                <button class="navbar-toggler" type="button" data-toggle="collapse" 
                 data-target="#navbarText" aria-controls="navbarText"           
                 aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item"><a class="nav-link" href="#">Home</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>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="col-4 p-0 ">
            <nav class="navbar-nav navbar-light bg-light" style="height:4rem;">
                <ul class=" list-unstyled mr-4" style="margin-top:1rem;"> <li class=" float-right">Login</li>
                </ul>
            </nav>
        </div>
    </div>
</div>
...