Question

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

导航栏模板并不真正符合我的设计目标，如下所示： (this demo)

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

我很难将第2行折叠到汉堡菜单中。

我的代码是:(手动完成上面的操作）

<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>
(...)

我会用导航栏替换整个容器流体，但是我无法实现链接在(demo)中的设计。我尝试调整CSS参数，但无法获得外观和精确测量。

在保留设计的同时，是否可以手动或其他方式使第2行可以在移动设备上折叠？

Answer 1

这是一个略有不同的想法。我喜欢Macsupport的原始设计中的第二个导航栏，但是移动设备上第二行的切换按钮对我来说并没有多大意义。特别是在空间有限的移动设备上。在最右边有一个汉堡按钮并没有真正减损徽标。

这是一个非常标准的导航栏示例，除了我添加了类.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>

对于CSS，在宽屏设备上，只需清除.navbar-collapse浮动，即可创建新行：

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

Working Demo in jsFiddle

这将是这样的：

Answer 2

这是rough example：

＆＃13;

/* CSS */

.nav2 {
  margin-top: 50px;
}

＆＃13;

<!-- HTML -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
</nav>
<nav class="navbar navbar-inverse nav2" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

＆＃13;

创建一个Bootstrap双导航栏，只有第二行可折叠

2 个答案:

Working Demo in jsFiddle