Блог

Я использую 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. Bootstrap 3 не учитывает такой объемный контент бренда. Вот почему flex великолепен в bootstrap 4.

В любом случае, с помощью нескольких настроек css (взломов) мы можем заставить .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>