bootstrap导航栏围绕电话

Question

我使用的是bootstrap 3.4.1，手机上的导航栏(例如S9 )出现问题，菜单图标转到新行。所以我使用了col 11和col 1，但是仍然不能工作。代码如下：

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="row">

            <!-- THE MENU -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-11 col-xs-11">
                <div class="navbar-header">
                  <a class="navbar-brand" href="index.html">Hammad Muhammad Mehmood</a>
                </div>
                <div id="main-menu" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="projects.html">Projects</a></li>
                      <li><a href="leetcode.html">Leetcode</a></li>
                      <li><a href="about.html">About</a></li>
                      <li><a href="https://github.com/Hammad214508/Personal-Website" class="btn btn-social-icon btn-github git-icon-size"><span class="fa fa-github"></span></a>
                      </li>
                    </ul>
                </div>
            </div>
            
            <!-- THE ICON -->
            <div class="col-sm-1 col-xs-1">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
                    <!-- <span class="sr-only">Toggle navigation</span> -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
      </div>
    </nav>

我已经将它添加到我的css中，所以至少它在新的行中显示，但它在其他手机上崩溃了。我不知道怎么把它放在同一条线上。我们将非常感谢您的帮助：

.col-xs-1 {
    width: 25%;
}

Answer 1

首先，丢弃引导导航栏中的列结构。它从来都不是为.row和.col-而设计的。

因为您的.navbar-brand内容对于S9或任何移动设备来说都过大了，所以它破坏了自举移动导航。Bootstrap 3没有考虑到这种过大的品牌内容。这就是为什么flex在bootstrap 4中很棒的原因。

无论如何，只要几个css时间(Hack)，我们就可以让.navbar-brand内容转到下一行，而不是让.navbar-toggle图标转到下一行。

请看这里的响应式示例。https://jsfiddle.net/joshmoto/k8c9uj7q/

​

.navbar-toggle {
  position: absolute;
  right: 0;
}

@media (max-width: 786px) {
  .navbar-brand {
    padding-right: 60px;
    height: auto;
  }
}

<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Hammad Muhammad Mehmood</a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="main-menu" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="leetcode.html">Leetcode</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="https://github.com/Hammad214508/Personal-Website" class="btn btn-social-icon btn-github git-icon-size"><span class="fa fa-github"></span></a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

​