Question

我正在尝试使用Boostrap 3网格系统。我有一个导航标题，我试图在常规桌面屏幕分辨率中自定义。这些列工作正常，直到我将屏幕尺寸缩小到大约1200px宽。然后左边的两个链接 - 一个按钮和一个常规链接开始堆叠。我不知道如何解决这个问题。当我更改列大小时，中间列菜单链接开始堆叠，我也不想要。我觉得我错过了一些非常基本的东西。我提前成为新手，所以我对某些方面缺乏知识表示歉意。

实时链接在这里：

http://www.splashdesignstudios.com/template/template3.html

Answer 1

您可以使用the navbar bootstrap and the collapse plugin。

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
            <a class="navbar-brand" href="#">
          <img alt="Brand" src="img/mocklogo.png" style="height: 100%;">
        </a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link1 <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
          <li><a href="#">Link4</a></li>
          <li><a href="#">Link5</a></li>
          <li><a href="#">Link6</a></li>
          <li><a href="#">Link7</a></li>
        </ul>
            <form class="navbar-form navbar-right">
                <a href="#"><span class="fa fa-sign-in"></span>Login</a>
            <button type="submit" class="btn btn-custom"><span class="fa fa-search"> &nbsp;</span>Sign Up</button>
        </form>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

只需更改bootstrap-css即可更改外观。您可以在bootswatch找到一些主题。

检查此link以查看其工作原理。在此示例中，我使用的是Paper主题。

希望它有用！

Answer 2

在屏幕尺寸减小后，将固定宽度类指定为三列会使最后一列的宽度减少。我将标题分成两列（两个都显示：table-cell和vertical-align：middle），第一列包含徽标和菜单，第二列包含按钮。但是，要使其在1200px下正常运行，您需要使用媒体查询并调整每个元素的样式。

在Bootstrap 3桌面中堆叠问题

2 个答案: