Question

我正在尝试将bootstrap 4.1导航栏限制为最大宽度1333px，居中并具有左右自动边距。什么都没用。使用！important包装容器，有什么帮助吗？

我的代码：

 <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;

}

所有在线粘贴到我的代码中的“有效”示例均无效：(

Answer 1

尝试使用此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 */
    }
}

这应该有效

Bootstrap 4.1导航栏最大宽度和自动边距

1 个答案: