自举 - 创建一个不使用崩溃移动导航(Bootstrap - Creating a mobile n

2019-10-20 10:38发布

看着很多的教程后,我找不到我在引导需求的解决方案。

这种情况......我有两个导航栏为平板电脑和手机的一个显示器,另一种是大型设备。 我没有使用折叠功能响应的原因是因为较大的导航栏不能真正被用于更小的设备。

我遇到的问题是,我似乎不能让一个按钮选项卡式移动菜单。 我知道如何与一个可折叠的导航栏做,但不与导航栏被永久移动菜单。

下面是我使用的HTML:

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg">
    <div class="container">
        <button class="visible-sm visible-xs navbar-toggle"
                data-target="#i-want-this-to-collapse" 
                data-toggle="collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="mini-navbar navbar-brand" href="/">
            <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo"
                 class="img-rounded logo-nav mini-navbar" />
        </a>
        <ul class="nav navbar-nav">
            <li><a href="#">Used Cars</a></li>
            <li><a href="#">Get Finance</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle"
                   data-toggle="dropdown">
                    About Driven<strong class="caret"></strong>
                </a>
                <ul class="dropdown-menu">
                    <li> <a href "#">The Team</a></li>
                    <li> <a href "#">Our Partners</a></li>
                </ul>
    </div>
</div>

正如你可以看到它不创建一个标签效应任何想法,我能做些什么来实现这一目标?

Answer 1:

默认情况下,在小屏幕上,导航栏菜单项会占用屏幕宽度的100%,并且堆叠在彼此的顶部。 因为堆放占用了大量的房地产,引导建议你添加一个切换按钮隐藏在不菜单项目中使用。

如果你想他们的风格像“标签”,而不是在全宽,你必须确保他们都可以组合在一起彼此相邻。 在大多数设计的情况下,这是不平凡的。

在任何width样式导航栏的项目,如标签只是采用下面的CSS:

.navbar-nav {
    margin: 0;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}
.navbar-nav > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
}

下面是小提琴演示


此外,作为一种替代建立两个独立的导航栏,你可以尝试动态地呈现内容根据现有的房产。

例如,如果您添加图标,您的菜单项中的每一个,在较小的屏幕尺寸你很可能只显示图标和悬停工具提示中脱身。

下面是一个例子:

<li class="active">
  <a href="#" >
    <i class="fa fa-car" title="Used Cars"
       data-toggle="tooltip" data-placement="bottom" ></i>
    <span class="hidden-xs">Used Cars</span>
  </a>
</li>

这里有一个小提琴是接近节目



文章来源: Bootstrap - Creating a mobile nav that doesn't use collapse