文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >引导4.0固定导航条的对齐问题

问引导4.0固定导航条的对齐问题
EN

Stack Overflow用户
提问于 2018-04-08 04:53:24
回答 3查看 139关注 0票数 1

我正试图把我的肚脐分成两个相等的部分。其中右边应该是我的菜单，左边应该是我的图标和搜索栏。在单击搜索栏时，它应该扩展到左侧部分的其余部分。我已经成功地使用了固定的肚脐。但我面临的问题是如何将我的菜单调整到右边。

这就是它的样子。

​

如您所见，菜单不是完全对齐的。在跟踪这篇文章之后，看来float : right不会，也不会成功。我不知道该怎么解决这个问题。这是我的代码：

代码语言：javascript
复制
<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框架也很陌生，我发现这两个框架非常令人困惑。所以任何帮助都将是非常感谢的。

html
css
twitter-bootstrap
bootstrap-4
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-04-08 06:42:56

在遵循@ZimSystem的答案here之后，ml-auto在引导4测试版中向右推项。终于让这段代码起作用了。

​

代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-04-08 05:09:17

​

代码语言：javascript
复制
ul.navbar-nav{
position:absolute;
right:0px;
}
代码语言：javascript
复制
<!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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-04-08 05:54:32

好吧--不久前，我遇到了一个类似的问题，解决方案是在您的mr-auto s上使用内置的引导程序ul和ml-auto类。虽然这样可以解决这个问题，但理想情况下，您应该为导航栏的每个部分提供一个ul (即搜索的是一个ul，右边的链接是另一个)。

​

代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49714537

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档