.navbar 内 <li> 的纯色背景答案

【问题标题】：Solid background on <li> inside .navbar.navbar 内 <li> 的纯色背景
【发布时间】：2019-10-25 18:22:21
【问题描述】：

在 Bootstrap 3 中可以这样做：

效果是在.navbar 内的<li> 元素上应用纯色背景色（在本例中为橙色）

这里有一个示例小提琴：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 不会占据导航栏的全部高度。效果是这样的：

Fiddle 在这里：https://jsfiddle.net/20ehqxsy/

标记的唯一区别是导航栏类适用于 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 4 时，有什么方法可以在 Bootstrap 3 中获得相同的效果？

【问题讨论】：

只需调整父 ul 元素和 li 元素的 padding 和 margins 即可获得所需的结果。并考虑调整line-height 值
请您发布一个示例，因为我看不到如何执行此操作？我尝试在开发工具中弄乱边距/填充，但它没有做任何事情。
你的第二把小提琴没有像图片显示的那样渲染。解决这个问题会让我们更容易看到发生了什么。
@LGSon 图片是小提琴的截图！
当我在 Chrome 和 FF 中运行第二个小提琴时，它确实 not 像那样渲染

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

只需将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>

【讨论】：

您应该删除答案中的 -lg 前缀。

【解决方案2】：

您的.navbar 元素具有：

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

因此，只需将其设置为 0，并将相同的值应用于您最本地元素的元素；为了便于说明，我使用了.dropdown，但您可以使用.navbar-nav > li等：

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

.navbar {
    padding: 0;
}

这给出了所需的结果。

请看这个小提琴：https://jsfiddle.net/tpv79kyr/

【讨论】：

这个问题是，如果您将其他<li> 元素添加到导航栏中，而不使用.orange-bg，那么高度/对齐方式就会失效。我很欣赏这与我提出的问题不同，我可能应该在我的示例中添加其他 <li>。 BS3 中的用例是有一个带有橙色背景的项目，另外 4 个没有橙色背景的项目。
我会开始另一个问题，因为不幸的是这个问题实际上并没有解决我的问题。添加更多项目后，问题会更加复杂
@Andy 我创建了一个带有多个菜单选项的小提琴。请查看此内容。我想我已经回答了所提出的问题

【解决方案3】：

使用 .navbar 类创建标准导航栏，然后是响应式折叠类：.navbar-expand-xl|lg|md|sm（将导航栏垂直堆叠在特大号上，大、中或小屏幕）。

您需要使用引导程序utility/spacing 来获得所需的结果。另外，请注意 li 中 nav-link 类的使用。

这是一种相当简洁的方法，无需覆盖引导程序默认 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>

【讨论】：