bootstrap 导航栏环绕 phone

Question

我正在使用 bootstrap 3.4.1，我遇到了 phone 上的导航栏问题（例如 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

首先放弃 bootstrap 导航栏中的列结构。它从未打算用于 .row 和 .col- 用法。

因为您的 .navbar-brand 内容对于 S9 或任何移动设备来说过大，它破坏了 bootstrap 移动导航。 Bootstrap 3 不考虑这种超大品牌内容。这就是为什么 flex 在 bootstrap 4.

中很棒的原因

无论如何，经过几个 css tweeks（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>

bootstrap 导航栏环绕 phone

bootstrap navbar wrapping around phone

html

grid

col

samsung-mobile

bootstrap-4