Bootstrap Navbar Марка слева, складные значки в центре и один элемент справа - PullRequest
Новая
       7

Bootstrap Navbar Марка слева, складные значки в центре и один элемент справа

0 голосов
/ 30 апреля 2018

Я пытался сделать это в течение нескольких дней без какого-либо полного результата, я пробовал коды из других вопросов, сделанных здесь, и ничего. Я хочу, чтобы мой бренд navbar был слева, несколько значков в центре и один значок справа, я хочу, чтобы все они были складными. Я попробовал все, но flexbox не работал для меня на разборном блоке, единственное, что я мог сделать, и это наиболее доступно для моей цели - это: 

<nav class="navbar navbar-expand-lg bg-bee navbar-bee justify-content-between" role="navegador">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler ml-auto" type="button" data-target="#navegador" data-toggle="collapse" aria-label="Expandir navegador" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-nav">
    <a data-toggle="tooltip" data-placement="bottom" title="Comprar" class="d-none d-lg-block nav-item nav-link rounded" href="#"><span class="far fa-handshake icon-nav"></span></a>
    <a data-toggle="tooltip" title="Vender" class="d-none d-lg-block nav-item nav-link rounded" href="#"><span class="fas fa-hand-holding-usd icon-nav"></span></a>
    <a data-toggle="tooltip" title="Mi carrito" class="d-none d-lg-block nav-item nav-link rounded" href="#"><span class="fas fa-shopping-cart icon-nav"></span></a>
</div>
<div class="navbar-nav">
    <form id="form-iSesion" action="procesos.php" method="POST">
        <a data-toggle="tooltip" title="Entrar o registrarse" id="iSesion" class="d-none d-lg-block nav-item nav-link rounded" href="#"><span class="fas fa-user icon-nav"></span></a>
        <input type="hidden" name="menu" value="1">
    </form>
</div>
<!--<div class="collapse navbar-collapse bg-primary" id="navegador">
    <div class="navbar-nav">
        <a data-toggle="tooltip" data-placement="bottom" title="Comprar" class="d-md-block d-lg-none nav-item nav-link rounded" href="#"><span class="far fa-handshake icon-nav"></span></a>
        <a data-toggle="tooltip" title="Vender" class="nav-item nav-link rounded" href="#"><span class="d-md-block d-lg-none fas fa-hand-holding-usd icon-nav"></span></a>
        <a data-toggle="tooltip" title="Mi carrito" class="d-md-block d-lg-none nav-item nav-link rounded" href="#"><span class="fas fa-shopping-cart icon-nav"></span></a>
        <form id="form-iSesion" action="procesos.php" method="POST">
            <a data-toggle="tooltip" title="Entrar o registrarse" id="iSesion" class="d-md-block d-lg-none nav-item nav-link rounded" href="#"><span class="fas fa-user icon-nav"></span></a>
            <input type="hidden" name="menu" value="1">
        </form>
    </div>
</div>-->
</nav>

С этим результатом:

Полный экран

Отзывчивое поведение

Но как только я активирую складную панель навигации, все снова становится беспорядочным, потому что этот контейнер занимает много места, и все, что я пытался исправить, это исправляет

неупорядоченного

Если я добавлю фон, вы увидите, сколько места он занимает

складывается с фоном

Искренне, я не знаю, что еще попробовать, это сводит меня с ума.

РЕДАКТИРОВАТЬ: решение ZimSystem работает, но есть проблема. Когда предметы разрушаются, каждый из них занимает целый ряд. Я хочу, чтобы для них отображалось встроенное отображение при свертывании меню, можно было бы отобразить их все по горизонтали

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Вот общий пример, использующий Bootstrap v4 и выполняющий то, что вы просили. По умолчанию «центральное» меню центрируется в доступном пространстве между логотипом и правым меню. Обратите внимание на ml-auto mr-auto классы на среднем элементе. Они применяют auto к левому и правому краям, центрируя его.

Если вы хотите создать идеальный центр в браузере, вы можете сделать так, чтобы бренд и правильное меню имели равную ширину в потоке родительского элемента . Один быстрый способ - вывести их из родительского потока, используя position:absolute, но вам нужно расположить логотип и правильное меню, используя свойства top/left/right, и убедиться, что они не пересекаются с центральным меню в любом Интервал реагирования.

Но самое простое решение - добавить поле к меньшему, чтобы оно достигло размера большего. В приведенном ниже примере я добавил правое поле 22px к логотипу, которое является разницей между его шириной и шириной правого меню. (86,25 - 64,48): 

@media (min-width: 992px) {
  nav .navbar-brand {
    margin-right: 22px;
  }
}

/* YOU DON'T NEED THE CSS BELOW, I ADDED IT TO 
   SHOW THE MENU IS CENTERED */

/* marking the center of the nav */

@media (min-width: 992px) {
  nav:after {
    width: 3px;
    content: '';
    position: absolute;
    background-color: red;
    height: 100px;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
  }
}


/* marking the center of the navbar-nav */

@media (min-width: 992px) {
  .navbar-nav.ml-auto.mr-auto {
    position: relative;
  }
  .navbar-nav.ml-auto.mr-auto:after {
    width: 1px;
    content: '';
    position: absolute;
    background-color: black;
    height: 50px;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    z-index: 1;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Some link</a>
      </li>
    </ul>
  </div>
</nav>

В действительности это можно сделать с помощью Javascript: 

(function($) {
  let centerMenu = function() {
    let $left = $('.navbar-brand'),
      $right = $('.navbar-nav', 'nav').last(),
      hasWidth = function(e) {
        return e.is('*') && e.width() > 0
      }

    if (hasWidth($left) && hasWidth($right) && $(window).width() > 992) {
      if ($left.width() > $right.width()) {
        $right.css({
          marginLeft: ($left.width() - $right.width()) + 'px'
        });
      } else {
        $left.css({
          marginRight: ($right.width() - $left.width()) + 'px'
        })
      }
      $(window).off('load resize', centerMenu);
    }
  };
  $(window).on('load resize', centerMenu);
})(jQuery)

jsFiddle .

0 голосов
/ 30 апреля 2018

Есть несколько разных способов использования Bootstrap 4, но я думаю, что самый простой - отделить navbar-collapse, дать каждой секции Navbar определенную ширину (с помощью w-*), а затем с помощью переключателя переключить оба navbar-collapse. 

<nav class="navbar navbar-expand-lg bg-light navbar-light" role="navegador">
    <a class="navbar-brand w-25" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-target=".navbar-collapse" data-toggle="collapse" aria-label="Expandir navegador" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse w-50" id="navegador">
        <div class="navbar-nav mx-auto justify-content-center">
            <a data-toggle="tooltip" data-placement="bottom" title="Comprar" class="nav-item nav-link rounded" href="#"><span class="far fa-handshake icon-nav"></span></a>
            <a data-toggle="tooltip" title="Vender" class="nav-item nav-link rounded" href="#"><span class="fas fa-hand-holding-usd icon-nav"></span></a>
            <a data-toggle="tooltip" title="Mi carrito" class="nav-item nav-link rounded" href="#"><span class="fas fa-shopping-cart icon-nav"></span></a>
        </div>
    </div>
    <div class="collapse navbar-collapse w-25" id="navegador2">
        <form id="form-iSesion" class="navbar-nav w-100  justify-content-end" action="procesos.php" method="POST">
            <a data-toggle="tooltip" title="Entrar o registrarse" id="iSesion" class="nav-item nav-link rounded" href="#"><span class="fas fa-user icon-nav"></span></a>
            <input type="hidden" name="menu" value="1">
        </form>
    </div>
</nav>

https://www.codeply.com/go/FlImrjvZ0o

...