Question

我试图让导航my web page正确响应移动设备上的显示。＆＃34; Home＆＃34;有三个导航元素。链接应显示在品牌名称下方，而是显示在旁边。

以下是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

只需像白色标签一样为白标旅行添加标题div

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

Answer 2

试试这段代码，

在您的代码上使用.clearfix，visible-xs类仅在移动设备上使用....

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

如何修复导航设备以使其正确显示移动设备？

2 个答案: