那些遇到过的问题

Bootstrap多级导航栏 - 如何防止内容崩溃

ser*_*0ne 9 html css twitter-bootstrap

首先,我想这可以作为如何使用Bootstrap实现多级导航栏的一个很好的例子(这是我长期努力的事情)

其次,我有一个问题,涉及防止内容在导航栏上崩溃.

我的导航栏有三行,两个navbar-default和一个navbar-inverse,以及三个按钮,用于在折叠时控制每个部分:

码:

<nav class="navbar navbar-fixed-top">

    <div class="navbar-default">
        <div class="container">
            <div class="navbar-header">

                <button type="button"
                        class="navbar-toggle collapsed pull-left"
                        data-toggle="collapse"
                        data-target="#megaNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <button type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#siteNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <button type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#authNav"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">NewCo</a>

            </div>
            <div id="siteNav" class="navbar-collapse collapse">
                <form class="navbar-form navbar-right">
                    <div class="btn-group">
                        <button type="button"
                                class="btn btn-default dropdown-toggle"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                            English <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">English</a></li>
                            <li><a href="#">French</a></li>
                            <li><a href="#">Spanish</a></li>
                            <li><a href="#">Italian</a></li>
                            <li><a href="#">German</a></li>
                        </ul>
                    </div>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="navbar-default">
        <div class="container">
            <div id="authNav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Log in</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="navbar-inverse">
        <div class="container">
            <div id="megaNav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">About Us</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Corporate</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>

</nav>
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/7Ltspomz/

当它没有折叠时(这就是我希望它看起来的样子) 在此输入图像描述

当它崩溃时(这是它目前的做法) 在此输入图像描述

我不想要这个(这是它目前的做法) 在此输入图像描述

我想这...(当它崩溃时) 在此输入图像描述

......而且(当它扩大时) 在此输入图像描述

我设法实现这一目标的唯一方法是有两个下拉按钮; 一个显示为sm,md和lg,另一个只显示在xs中.我并不特别喜欢这种方法,因为它复制了内容 - 尽管从很多方面来看,它并不是很多内容,但这并不是特别好.

有关如何实现这一目标的任何想法？

小智 6

您可以为响应式移动视图添加重复的下拉列表并隐藏其他视图,我只是更新您的小提琴.. 请点击此处

HTML

<nav class="navbar navbar-fixed-top">

<div class="navbar-default">
    <div class="container">
        <div class="navbar-header">

            <button type="button"
                    class="navbar-toggle collapsed pull-left"
                    data-toggle="collapse"
                    data-target="#megaNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <button type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#siteNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <button type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#authNav"
                    aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#">NewCo</a>

            <div class="pull-right mobile">
            <div class="btn-group">
                    <button type="button"
                            class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false">
                        English <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">English</a></li>
                        <li><a href="#">French</a></li>
                        <li><a href="#">Spanish</a></li>
                        <li><a href="#">Italian</a></li>
                        <li><a href="#">German</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div id="siteNav" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right">
                <div class="btn-group desktop">
                    <button type="button"
                            class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false">
                        English <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">English</a></li>
                        <li><a href="#">French</a></li>
                        <li><a href="#">Spanish</a></li>
                        <li><a href="#">Italian</a></li>
                        <li><a href="#">German</a></li>
                    </ul>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="navbar-default">
    <div class="container">
        <div id="authNav" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Log in</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Privacy Policy</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="navbar-inverse">
    <div class="container">
        <div id="megaNav" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Corporate</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.navbar .navbar-header .navbar-toggle.pull-left {
  margin-right: 0;
  margin-left: 15px; 
}

.mobile{display:none;}

@media (max-width: 767px){
  .desktop{display:none}

  .mobile{
    display:block;
    margin-top:8px;
    margin-right:15px;
  }
}
Run Code Online (Sandbox Code Playgroud)

TTC*_*TCC 5

我认为你只能使用bootstrap样式来实现这一点.

您可以定义您的specail样式,并移动dropdown-menuoutof #siteNav.像这样:

<div class="navbar-default">
    <div class="container">
        <div class="nav-special-contailner">
            <div class="btn-group nav-special">
                <button type="button"
                        class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    English <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">English</a></li>
                    <li><a href="#">French</a></li>
                    <li><a href="#">Spanish</a></li>
                    <li><a href="#">Italian</a></li>
                    <li><a href="#">German</a></li>
                </ul>
            </div>
        </div>
        <div class="navbar-header">
            ...
        </div>
        <div id="siteNav" class="navbar-collapse collapse">
            ...
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

和

.nav-special {
    position: absolute;
    right: 133px;
    top: 8px;
}

@media (min-width: 768px) {
    .nav-special-contailner {
        position: relative;
    }
    .nav-special {
        right: 0;
        margin-right: 250px;
    }
}
Run Code Online (Sandbox Code Playgroud)

这是一个jsfiddle.

归档时间：

查看次数：

951 次

最近记录：

9 年，5 月 前
从bootstrap 3导航栏的折叠中排除菜单项 65
更多相关链接
相关归档
Twitter Bootstrap 3 Sticky Footer 201
将图像对齐到同一行的文本左侧 - Twitter Bootstrap3 47
在Android中抓取HTML网页的最快方法是什么？ 25
切换到Twitter bootstrap的优点/缺点 22
在Razor视图中有条件地更改CSS类 19
背景图像边框 18
CSS:如何从中心而不是左上角缩放图像 17
页面底部的Bootstrap页脚 13
如何在Bootstrap 4中均匀分隔Navbar元素 8
ng-disabled不使用引导按钮 6
难疑归档
如何使用CSS垂直居中文本？ 2190
Dockerfile中的`COPY`和`ADD`命令有什么区别？ 1991
JavaScript中的'new'关键字是什么？ 1684
如何调试Node.js应用程序？ 1531
如何使用Bash将stdout和stderr重定向并附加到文件中？ 1440
静态只读与const 1349
将JS对象转换为JSON字符串 1199
如何删除旧的Docker容器 1162
什么是Python 3相当于"python -m SimpleHTTPServer" 1124
如何在PHP中获取客户端IP地址 1123