Question

我有一个使用Bootstrap 3的HTML页面。在该页面中，我有一个导航栏。我的导航栏略有不同。它分为三个部分：选择器，品牌和行动。在桌面上，它看起来像这样：

+------------------------+--------+------------------------+ 
| Day of Week v          | My App |    docs help welcome v |
+------------------------+--------+------------------------+

这与以下代码一起正常工作。该代码显示在Bootply中。我的挑战是，我想在移动设备上有所不同。在移动设备上查看此页面时，我希望将其呈现为：

+------------------------+--------+------------------------+ 
| My App                 |        |           docs help  = |
+------------------------+--------+------------------------+

然后，当用户点击汉堡包菜单时，我想在汉堡包菜单中显示以下内容：

+----------------------------+
| Day of Week v              |
|
| welcome                    |
| Your Info                  |
| Logout                     |
+----------------------------+

虽然功能相同，但渲染完全不同。我不确定如何获得我想要的移动视图。在这一点上，我尝试了以下（Bootply）

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>

      <div style="position: absolute; width: 100%; left: 0; text-align: center; margin: auto;">
        <a href="/">My App</a>
      </div>

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle banner-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Day of Week<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Sunday</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">docs</a></li>
        <li><a href="#">help</a></li>
        <li>
          <a href="#" class="dropdown-toggle banner-username-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Welcome <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="banner-dropdown-link">Your Info</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#" class="banner-dropdown-link">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

真的让我感到困惑。

Answer 1

试试这个：

在 CODEPEN

上查看演示

HTML：

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>

      <div class="logo-center navbar-brand">
        <a href="/">My App</a>
      </div>
      <ul class="list-inline visible-xs navmenu-mobile" style="">
        <li><a href="#">docs</a></li>
        <li><a href="#">help</a></li>
      </ul>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle banner-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Day of Week<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Sunday</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden-xs"><a href="#">docs</a></li>
        <li class="hidden-xs"><a href="#">help</a></li>
        <li>
          <a href="#" class="dropdown-toggle banner-username-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Welcome <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="banner-dropdown-link">Your Info</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#" class="banner-dropdown-link">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS：

.navmenu-mobile {
  position: absolute;
  right: 80px;
  top: 15px;
  text-align: center;
}

@media (min-width: 768px) {
  .logo-center {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
  }
}

我希望它可以帮到你

Answer 2

这可能会有所帮助，也可能没有帮助，但这只是一个想法。

您确定要添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

此<head>代码的代码行？我发现这可能会阻碍移动视图对我所参与的一些项目的期望。

Bootstrap 3 Navbar - 移动特定视图

2 个答案: