引导导航栏环绕手机

问题描述

我正在使用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%;
}

解决方法

首先放弃引导导航栏中的列构造。从未打算将其用于.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>