Question

我想在移动版本中显示我的页面上的徽标和按钮。我目前正在使用bootstrap navbar：

var qrform, rcontainer, rbutton, parentrbutton, milliseconds, randomnumber, css;
css = document.createElement("style");
css.type = "text/css";
/*jshint multistr: true */
css.innerHTML = "#rb{\
    display: -webkit-flex;\
    display: flex;\
    -webkit-align-items: stretch;\
    align-items: stretch;\
    height: 25px;\
    margin-top: 1px;\
    text-transform: uppercase;\
    font-size: 10px;\
    }\
    #rb #uform + input {\
    text-transform: uppercase;\
    font-size: 10px !important;\
    }\
    #uform{\
    width:95%;\
    text-align:center;\
    }\
    ";
document.body.appendChild(css);
qrform = document.getElementById("qr").getElementsByTagName("form")[0];
rcontainer = document.createElement('div');
rcontainer.setAttribute("id", "rb");
qrform.appendChild(rcontainer);
rcontainer.innerHTML = "<input id=\"uform\" type=\"text\" name=\"UUID\" placeholder=\"UUID\" readonly>";
rbutton = document.createElement('input');
rcontainer.appendChild(rbutton);
rbutton.setAttribute("type", "button");
rbutton.setAttribute("value", "generate");
rbutton.addEventListener('click', uuid);

function uuid() {
    milliseconds = Date.now();
    randomnumber = Math.floor(Math.random() * 365 * 86400000);
    document.getElementById("uform").value = milliseconds - randomnumber;
    document.getElementById("uform").readOnly=true;
}

使用以下代码，只有navbar-header内的徽标显示在手机上，而不是按钮，Home，About等。我在桌面上没有任何问题。

Answer 1

首先：根据你的html，你没有

 <nav class="navbar navbar-default">
</nav>

应该是

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#first">
      <img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
    </a>
    <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>

  </div>
  <div class="navbar-collapse collapse" id="bs-navbar">
    <ul class="nav navbar-nav">
      <li>
        <a class="page-scroll" class="active" href="#first">Home</a>
      </li>
      <li>
        <a class="page-scroll" href="#one">About</a>
      </li>
    </ul>
  </div>
</nav>

第二：Bootstrap在移动设备中隐藏导航栏折叠，但您可以使用按钮切换它..

没有按钮的fiddle ..

带按钮的fiddle ..

Answer 2

尝试删除类navbar-collapse collapse和id bs-navbar。这些类与bootstraps库相关，当视口检测到给定的屏幕宽度（移动设备）时，它会使菜单崩溃。通过删除这些类，即使在移动设备中也会始终显示按钮。

移动设备上没有显示的bootstrap css导航栏

2 个答案: