代码之家 › 专栏 › 技术社区 › Andy

内部导航栏上的纯色背景

bootstrap-4 twitter-bootstrap-3 twitter-bootstrap css html

Andy · 技术社区 · 6 年前

在 引导程序3 可以这样做:

效果是将一种纯色背景色(在本例中为橙色)应用于 <li> 内部元素 .navbar

唯一的自定义CSS是橙色背景,其余的是引导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 .

在 引导4 这似乎无法实现,因为 <理工大学; 里面 .导航栏 不会占据导航栏的整个高度。效果如下:

小提琴在这里: https://jsfiddle.net/20ehqxsy/

标记中唯一的区别是导航栏类适合引导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>

在使用引导程序4时,是否有任何方法可以获得引导程序3中可能出现的相同效果?

0 回复 | 直到 6 年前

Priyesh Diukar 6 年前

标准导航栏是用.navbar类创建的,然后是响应折叠类: .navbar扩展xl_lg_md_sm (在超大、大、中或小屏幕上垂直堆叠导航栏)。

你需要使用引导程序 utility/spacing 达到预期的效果。另外,注意使用 导航链接 内部类锂 .

这是一个相当干净的方法,不覆盖引导默认的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>

Martin Miguel Stevens 6 年前

你的 .navbar 元素具有:

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

因此,只需将其设置为0,并将相同的值应用于您的most元素local元素;为了便于演示,我使用了 .dropdown 但是你可以用 .navbar-nav > li 等等:

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

.navbar {
    padding: 0;
}

这给出了所需的结果。

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

Sai Manoj 6 年前

只需应用 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>