文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >引导4 Navbar <li>列表

问引导4 Navbar <li>列表
EN

Stack Overflow用户
提问于 2018-01-28 12:35:40
回答 1查看 923关注 0票数 2

我需要一些帮助引导Navbar (Bootstrap v4.0.0-beta.3)。

我要做什么改变，使按钮文本是单行，而不是彼此之间。当行满时，其他按钮应从下一行的左边开始。

目前，我使用以下代码：

代码语言：javascript
复制
<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
    <div class="container">
        <div class="row w-100 no-gutters d-lg-block d-flex flex-wrap justify-content-between">
            <a class="navbar-brand col-lg-3 col-7 py-lg-3 order-lg-1 order-2 float-left d-block" href="#">
                Project Name
            </a>
            <div class="navbar-text col-lg-6 col-12 order-lg-2 order-1 text-right float-right align-self-end">Fix Nav Info</div>
            <button class="navbar-toggler collapsed float-right order-3" type="button" data-toggle="collapse" data-target="#all-pages-176" aria-controls="all-pages-176" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="all-pages-176" class="navbar-collapse collapse float-right col-lg-12 order-4" style="height: auto;">
                <ul id="menu-all-pages" class="navbar-nav ml-auto">
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

                </ul>

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

样式表：

代码语言：javascript
复制
@media (min-width: 992px) {
    .nav-item {
        float: left;
        font-size: 13px;
        margin: 3px;
        padding: 0px;
        border: 1px solid #605555;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px; 
    }
}

结果：

​

​

应该是这样

​

​

bootstrap-4
navbar
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-28 13:03:18

要达到所需的效果，只需将d-lg-inline-block类添加到ul元素中：

它从大型(lg)断点开始将列表项转换为内联块元素，这使它们按照您所描述的方式包装。

下面是完整的工作代码片段：

​

代码语言：javascript
复制
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    @media (min-width: 992px) {
        .nav-item {
            font-size: 13px;
            margin: 3px;
            padding: 0px;
            border: 1px solid #605555;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            line-height: 8px;
        }
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
    <div class="container">
        <div class="row w-100 no-gutters d-lg-block d-flex flex-wrap justify-content-between">
            <a class="navbar-brand col-lg-3 col-7 py-lg-3 order-lg-1 order-2 float-left d-block" href="#">
                Project Name
            </a>
            <div class="navbar-text col-lg-6 col-12 order-lg-2 order-1 text-right float-right align-self-end">Fix Nav Info</div>
            <button class="navbar-toggler collapsed float-right order-3" type="button" data-toggle="collapse" data-target="#all-pages-176" aria-controls="all-pages-176" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="all-pages-176" class="navbar-collapse collapse float-right col-lg-12 order-4" style="height: auto;">
                <ul id="menu-all-pages" class="navbar-nav d-lg-inline-block ml-auto">
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
                    <li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

​

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

https://stackoverflow.com/questions/48486421

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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