Bootstrap - 创建一个不使用折叠的移动导航 [英] Bootstrap - Creating a mobile nav that doesn't use collapse

问题描述

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

我遇到的问题是我可以似乎没有用按钮制作带标签的移动菜单。我知道如何使用可折叠的导航栏，但不能使用永久性的移动菜单。

b
$ b

 < 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-brandhref =/> 
  class =img-rounded logo-nav mini-navbar/> 
< / a> 
< ul class =nav navbar-nav> 
< li>< a href =＃>二手车< / a>< / li> 
< li>< a href =＃>获取金融< / a>< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggle
 data-toggle =dropdown> 
关于Driven< strong class =caret>< / strong> 
< / a> 
< ul class =dropdown-menu> 
< li> < a href＃>团队< / a>< / li> 
< li> < a href＃>我们的合作伙伴< / a>< / li> 
< / ul> 
< / div> 
< / div> 
  

正如你所看到的，它不会创建一个选项卡式的效果，不知道我能做什么来实现这一点？

解决方案

默认情况下，在小屏幕上，导航栏菜单项将占用屏幕宽度的100％另一个。由于堆叠会占用大量的房地产，引导程序建议您添加一个切换按钮以在不使用时隐藏菜单项。

如果您想将它们设置为标签而不是全部宽度，则必须确保它们可以彼此相邻。在大多数设计案例中，这不是微不足道的。

要以任何宽度设置制表符等导航栏项目，只需应用以下CSS：

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


b
$ b

另外，作为构建两个单独的navbars的替代方案，您可以尝试根据可用的房地产动态显示内容。

例如，如果您为每个菜单项添加了图标，在较小的屏幕尺寸下，您只需在悬停时显示图标和工具提示即可离开。

以下是一个例子：

 < li class =active> 
< a href =＃> 
< i class =fa fa-cartitle =二手车
 data-toggle =tooltipdata-placement =bottom>< / i> 
< span class =hidden-xs>二手车< / span> 
< / a> 
< / li> 
  

这是一个小提琴演出的方法

after looking at lots of tutorials I cant find a solution for my needs in Bootstrap.

The situation... I have two navbars one displays for tablets and mobiles, the other is for larger devices. The reason I didn't use the collapsing responsive feature is because the larger navbar couldn't really be used for smaller devices.

The issue I am having is that I can't seem to make a tabbed mobile menu with a button. I know how to do it with a collapsible navbar but not with a navbar that is permanently a mobile menu.

Here is the html I am using:

<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>

As you can see it doesn't create a tabbed effect any idea what I can do to achieve this?

解决方案

By default, on small screens, navbar menu items will take up 100% of the screen width and stack on top of one another. Because that stacking takes up a lot of real estate, bootstrap suggests you add a toggle button to hide the menu items when not in use.

If you want to style them like 'tabs', instead of at full width, you have to make sure they can all fit together next to each other. In most design cases, this isn't trivial.

To style the navbar items like tabs at any width just apply the following CSS:

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

Here's a demo in fiddle

---

Additionally, as an alternative to building two separate navbars, you can try to dynamically present content based on available real estate.

For example, if you added icons to each one of your menu items, at smaller screen sizes you could probably get away with just displaying an icon and a tooltip on hover.

Here's an example:

<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>

Here's a fiddle the shows that approach

这篇关于Bootstrap - 创建一个不使用折叠的移动导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！