Question

我正在使用Bootstrap构建响应式网站。该网站有一个固定的导航栏。它在桌面上运行良好。但是，当站点在移动设备上运行时，右上角的图标会消失。我的代码如下所示：

<div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="/home" class="navbar-brand"><img src="/logo.png"></a>
    </div>
    <div class="navbar-header navbar-right">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a id="viewButton" data-toggle="tooltip" data-placement="bottom"><span class="glyphicon glyphicon-print"></span></a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
              <span class="glyphicon glyphicon-arrow-right"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

在移动视图中，如何右键对齐导航栏中的按钮？

谢谢！

Answer 1

您可以尝试删除此处的折叠类

  <div class="navbar-collapse collapse">

Answer 2

您好，您必须从div中删除崩溃类。 http://www.bootply.com/F6jMrwYOQQ#

<div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a href="/home" class="navbar-brand"><img src="/logo.png"></a>
        </div>
        <div class="navbar-header navbar-right">
          <div class="navbar">
            <ul class="nav navbar-nav navbar-right">
              <li><a id="viewButton" data-toggle="tooltip" data-placement="bottom"><span class="glyphicon glyphicon-print"></span></a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
                  <span class="glyphicon glyphicon-arrow-right"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>

Bootstrap - 在移动设备上的右侧对齐图标按钮

2 个答案: