创建一个Bootstrap双导航栏，只有第二行可折叠 [英] Creating a Bootstrap twin navbar, only 2nd row collapsible

问题描述

我想用Bootstrap创建一个双导航栏（两行）。

导航栏模板不能真正满足我的设计目标， b $ b

I want to create a twin navbar (two rows) with Bootstrap.

The navbar template doesn't really meet my design goals, which look something like: (this demo)

+-------------+--------------------------------+
|    title    |                                | this part does not collapse
+-------------+--------------------------------+
|  two-line  |  two-line |                     | on smaller screens,
|   button   |   button  |                     | collapses to 'hamburger' menu
+----------------------------------------------+

I am having difficulty collapsing the 2nd row into the hamburger menu.

My code is: (did this manually to achieve look as above)

<table>
<tr>
(1 cell for title, 1 cell for rest of row)
</tr>
<tr class="nav2">
        <td style="width:100%;" colspan="2">
        <table style="width:600px;">
            <tr>
                <td style="width:100%;">
                    <div class="container-fluid">
                        <div class="row">
                            <a href="#"><div class="col-xs-3">
                                <span class="link">Heatmap</span>
                            </div></a>
                            <a href="#"><div class="col-xs-3">
                                <span class="link">Basic<br>Reports</span>
                            </div></a>
                            <a href="#"><div class="col-xs-3">
                                <span class="link">Group-aware<br>Reports</span>
                            </div></a>
                            <a href="#"><div class="col-xs-3">
                                <span class="link">Auto Group<br>Identification</span>
                            </div></a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>
(...)

I would replace that whole container-fluid with a navbar, but then I wouldn't be able to achieve the design as linked in: (demo). I tried adjusting the CSS parameters, but wasn't able to get the look and precise measurements.

Any way to make the 2nd row collapsible on mobile, manually or otherwise, while preserving the design?

解决方案

Here's a slightly different idea. I like Macsupport's second navbar from your original design, but the toggle button on a second row on a mobile device doesn't make a lot of sense to me. Especially on mobile where space is limited. Having a hamburger button on the far right doesn't really detract from the logo at all.

Here's a pretty standard navbar example, except I've added the class .twoRow

<div class="navbar navbar-inverse twoRow">
    <div class="container">
        <!-- Header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 
                    data-toggle="collapse" 
                    data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                Bootstrap 3 Skeleton
            </a>
        </div>
        <!-- Navbar Links -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

For the CSS, on a widescreen device, just clear the .navbar-collapse float so it creates a new line:

@media (min-width: 768px) { 
    .twoRow .navbar-collapse {
        clear: left;
    }
}

Working Demo in jsFiddle

Which will look like this:

这篇关于创建一个Bootstrap双导航栏，只有第二行可折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！