Question

我正在尝试将导航栏划分为两个相等的部分。其中右侧应该是我的菜单，左侧应该是我的图标和搜索栏。然后单击搜索栏，它应该延伸到左侧部分的其余部分。我已成功使用固定的navabar。但我在将菜单调整到右侧时遇到了问题。

这就是它的样子。

如您所见，菜单未完全正确对齐。在关注SO的帖子之后看起来float : right不会也不起作用。我不知道如何解决这个问题。这是我的代码：

<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
            <div class="px-2">
                <form>
                    <input type="text" name="search" placeholder="Search ...">              
                </form>
            </div>
        </div>
        <div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
            <ul class="navbar-nav">
                <li class="nav-item-active">
                    <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/product">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/career">Career</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/contact">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">&#9776;</a>
                </li>
            </ul>           
        </div>
    </nav>

在浏览器的元素中，我尝试使用margin-right进行设置，但这些值是否定的，我认为这不是正确的方法。我也是前端开发和bootstrap框架的新手，我发现它非常令人困惑。所以任何帮助都将受到高度赞赏。

Answer 1

ul.navbar-nav{
position:absolute;
right:0px;
}

<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>


</head>

<body>
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
            <div class="px-2">
                <form>
                    <input type="text" name="search" placeholder="Search ...">              
                </form>
            </div>
        </div>
        <div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
            <ul class="navbar-nav">
                <li class="nav-item-active">
                    <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/product">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/career">Career</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/contact">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">&#9776;</a>
                </li>
            </ul>           
        </div>
    </nav>

</body>
</html>

Answer 2

好吧 - 我不久前遇到了类似的问题，解决方案是在mr-auto上使用内置的bootstrap ml-auto和ul类。虽然这可以解决问题，但理想情况下，您可以为导航栏的每个部分设置ul（例如，ul用于搜索，另一部分用于右侧的链接

＆＃13;

<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2 mr-auto">
        <img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
        <div class="px-2">
            <form>
                <input type="text" name="search" placeholder="Search ...">
            </form>
        </div>
    </div>
    <div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item-active">
                <a class="nav-link" href="#/">Home
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/product">Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/career">Career</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/contact">Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">&#9776;</a>
            </li>
        </ul>
    </div>
</nav>

＆＃13;

Answer 3

在关注@ ZimSystem的回答here后，ml-auto将项目推送到bootstrap 4 beta中。最后得到了这段代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
            <div class="px-2">
                <form>
                    <input type="text" name="search" placeholder="Search ...">              
                </form>
            </div>
        </div>
        <div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item-active">
                    <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/product">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/career">Career</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/contact">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">&#9776;</a>
                </li>
            </ul>           
        </div>
    </nav>

与bootstrap 4.0固定导航栏对齐问题

3 个答案: