Сплошной фон на <li>внутри .navbar - PullRequest
Новая
       22

Сплошной фон на <li>внутри .navbar

0 голосов
/ 11 июня 2019

В Bootstrap 3 можно было сделать это:

enter image description here

Эффект заключался в применении сплошного фона (в данном случае оранжевого) к элементу <li> внутри .navbar

Вот пример скрипки: https://jsfiddle.net/p1vm4aeo/

Единственный пользовательский CSS - это оранжевый фон, остальное - Bootstrap 3: 

.orange-bg {
  background-color: orange;
}

Разметка выглядит следующим образом: 

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div id="navbar-collapse-1" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown orange-bg">
                <a href="#">Foo</a>
            </li>
        </ul>
    </div>
</nav>

Опять же, это стандартная разметка Bootstrap 3 с добавлением .orange-bg.

В Bootstrap 4 это не представляется возможным, поскольку <li> внутри .navbar не занимает всю высоту панели навигации. Эффект таков:

enter image description here

Скрипка для этого здесь: https://jsfiddle.net/20ehqxsy/

Единственная разница в разметке состоит в том, что классы Navbar соответствуют Bootstrap 4 вместо 3 (например, .navbar-expand-lg): 

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light navbar-default" role="navigation">
  <div id="navbar-collapse-1" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
            <li class="dropdown orange-bg">
                <a href="#">Foo</a>
            </li>
        </ul>
  </div>
</nav>

Есть ли способ получить тот же эффект, который возможен в Bootstrap 3 при использовании Bootstrap 4?

Ответы [ 3 ]

0 голосов
/ 11 июня 2019

Ваш .navbar элемент имеет: 

.navbar {
    ...
    padding: .5rem 1rem;
}

Так что просто установите это значение в 0 и примените то же значение к самому элементному элементу; Для простоты иллюстрации я использовал .dropdown, но вы можете использовать .navbar-nav > li и т. д .: 

.dropdown {
    ...
    padding: .5rem 1rem;
}

.navbar {
    padding: 0;
}

Это дает требуемый результат.

Пожалуйста, смотрите эту скрипку: https://jsfiddle.net/tpv79kyr/

0 голосов
/ 11 июня 2019

Создается стандартная панель навигации с классом .navbar, за которым следует реагирующий свертывающийся класс: .navbar-expand-xl | lg | md | sm (размещает панель навигации вертикально на очень большом, большом, средние или маленькие экраны).

Для достижения желаемого результата вам необходимо использовать начальную загрузку Утилита / интервал .Также обратите внимание на использование nav-link класса внутри li .

Это значительно более чистый подход, без переопределения начальной загрузки css. 

.orange-bg {
  background-color: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar p-0 fixed-top navbar-expand-sm navbar-light bg-light navbar-default" role="navigation">
  <div id="navbar-collapse-1" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="nav-item dropdown orange-bg">
        <a class="nav-link" href="#">Foo</a>
      </li>
    </ul>
  </div>
</nav>
0 голосов
/ 11 июня 2019

Просто примените padding:0 к навигации, так как она занимает padding:16px.Ниже приведено рабочее проверенное решение

Чтобы сделать вашу навигационную панель отзывчивой и складной, вы можете использовать .navbar-expand-xl|lg|md|sm см. Navbar 

nav {
  padding: 0px!important;
}

.orange-bg {
  background-color: orange!important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar fixed-top navbar-expand navbar-light bg-light navbar-default" role="navigation">
    <div id="navbar-collapse-1" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown orange-bg">
          <a href="#">Foo</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

output

...