如何修复我的导航，使其在移动设备上正确显示？

Question

我正在尝试让 my web page 上的导航正确响应以显示在移动设备上。有三个导航元素 "Home" link 应该显示在品牌名称下方，但它显示在品牌名称旁边。

举个例子plnkr

<body>
        <div class="navbar wlt-navbar-default navbar-static-top">
            <a href="/" class="navbar-brand">White Label Travel</a>
            <ul class="nav navbar-nav navbar-right">
                <li></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Faq</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
  </body>

我该如何解决这个问题？

Answer 1

试试这个代码，

在您的代码中使用 .clearfix，visible-xs class 仅适用于移动设备....

<div class="navbar wlt-navbar-default navbar-static-top">
                <a href="/" class="navbar-brand">White Label Travel</a>
                <div class="clearfix visible-xs"></div>

                <ul class="nav navbar-nav navbar-right">
                    <li></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Faq</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

Answer 2

像这样为白标旅行添加headerdiv

<div class="navbar wlt-navbar-default navbar-static-top">
      <div class="navbar-header">
          <a href="/" class="navbar-brand">White Label Travel</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
           <li></li>
           <li><a href="#">Home</a></li>
           <li><a href="#">Faq</a></li>
           <li><a href="#">Contact</a></li>
      </ul>
 </div>

Here 是普朗克...

GL!

如何修复我的导航，使其在移动设备上正确显示？

How do I fix my nav so that it shows properly for mobile devices?

twitter-bootstrap-3