Bootstrap 4.1 navbar, максимальная ширина и авто поля - PullRequest
Новая
       15

Bootstrap 4.1 navbar, максимальная ширина и авто поля

0 голосов
/ 19 октября 2018

Я пытаюсь получить загрузочную панель 4.1 navbar, ограниченную максимальной шириной 1333 пикселей, центрированную и имеющую автоматические поля слева и справа.Ничего не работаетОборачиваем контейнер, используя! Важный ... Любая помощь?

Мой код: 

 <div class="container" style="">
<nav class="navbar fixed-top navbar-expand-lg  navbar-light rounded mx-auto" id="menu">       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nawigacja" aria-controls="nawigacja" aria-expanded="false" aria-label="przycisk nawigacyjny"> <span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse " id="nawigacja">
  <a class="navbar-brand" href="index.php"><img class="img-fluid float-right" src="logo.png" id="logo" alt="logo"/></a>
        <ul class="navbar-nav  ">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    </a>
                <div class="dropdown-menu navbar-light" aria-labelledby="navbarDropdown">

                    <a class="dropdown-item" href="odzyskiwanie_danych.php">abc</a>
                    <a class="dropdown-item" href="a.php">aaa</a>
                    <a class="dropdown-item" href="b.php">aaa</a>
                    <a class="dropdown-item" href="c.php">aaa</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="a.php">aaa</a>
                    <a class="dropdown-item" href="aaa.php">aaaa</a>
                </div>
            </li>



            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     aaaa
    </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="pp.php">Saaa</a>
                    <a class="dropdown-item" href="formularz_pp.php">aaa</a>
                </div>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      aaa
    </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="aaa.php">Dane adresowe</a>
                    <a class="dropdown-item" href="aaaa.php">a</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="aaa.php">Faaa</a>
                </div>
                <a class="nav-link" style=""><img src="t-small.png" /> 1234567</a>
            </li>



        </ul>
    </div>
</nav>
</div>

И стиль: 

    .container {padding: 0px !important;}

nav.navbar {
width: 1200px;
margin: auto !important;
}
#nawigacja {

margin: auto;

}

Все «рабочие» примеры онлайнвставить в мой код не работает :(

1 Ответ

0 голосов
/ 19 октября 2018

Попробуйте это CSS: 

nav.navbar {
    max-width: 1333px; /* applying max-width */
    margin: 0 auto; /* center */
    .navbar-collapse {
        justify-content : center; /* center the elements in the block if there is flex */
        -webkit-justify-content : center; /* make it works on some navigators */
    }
}

Это должно работать

...