环绕手机的引导导航栏

Question

我正在使用 bootstrap 3.4.1，但手机上的导航栏有问题（例如 S9） 菜单图标最终转到新行。所以我做了 col-xs-11 和 col-xs-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 tweeks（黑客），我们可以让 .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>