Как я могу выровнять кнопку слева со ссылками в центре для складной панели навигации? - PullRequest
Новая
       11

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

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

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

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

<nav id="nav" class="navbar navbar-expand-sm navbar-light justify-content-center">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li id="NavbarLinks" class="nav-item">
                <a class="nav-link" href="Home.php">Home</a>
            </li>
            <li id="NavbarLinks" class="nav-item">
                <a class="nav-link" href="Services.php">Services</a>
            </li>
            <li id="NavbarLinks" class="navabr-item">
                <a class="nav-link" href="BookAppointment.php">Book Appointment</a>
            </li>
        </ul>
    </div>
</nav>

Ответы [ 2 ]

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

Вы пытаетесь что-то подобное?Если я правильно понимаю, вы хотите, чтобы кнопка переключения находилась слева, но сами ссылки в центре, когда панель навигации расширяется? 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav id="nav" class="navbar navbar-expand-lg navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse text-center" id="collapsibleNavbar">
    <ul class="navbar-nav  mx-auto">
      <li id="NavbarLinks" class="nav-item">
        <a class="nav-link" href="Home.php">Home</a>
      </li>
      <li id="NavbarLinks" class="nav-item">
        <a class="nav-link" href="Services.php">Services</a>
      </li>
      <li id="NavbarLinks" class="navabr-item">
        <a class="nav-link" href="BookAppointment.php">Book Appointment</a>
      </li>
    </ul>
  </div>
</nav>
0 голосов
/ 18 апреля 2019

Вы можете сделать это в CSS, используя @media. Вот пример (я не уверен, что это то, что вы хотите) 

@media (max-width:767px) {
    .navbar-toggler {
        left: 0px;
    }
    .nav-item {
        text-align: center;
    }
}
...