搜索
搜索

带有过渡边框的Twitter Bootstrap导航栏-背景色不在整个活动项目中

goldlife 发表于 Dev
37
黄金人生

请参阅我的工作示例。如您所见，背景色并未覆盖整个活动项目。当我删除过渡CSS时，它将像本示例一样工作（请将浏览器的大小调整为移动版本）

https://getbootstrap.com/examples/navbar-fixed-top/#

我怎么解决这个问题？

/* Navbar */
.navbar-fixed-top{
    top: 80px;
}
.navbar-default{ /* assigning the top bar to the entire navbar div element */
    background-color: #4F4F4F;
}
nav.navbar {
    box-shadow: 0 0 2px 0 #ccc;
}
nav.navbar a {
    color: #FF7D36;
}
nav.navbar ul.navbar-nav a {
    color: #FF7D36;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: #000;
}
nav.navbar ul.navbar-nav a:hover,
nav.navbar ul.navbar-nav a:visited,
nav.navbar ul.navbar-nav a:focus,
nav.navbar ul.navbar-nav a:active {
    background: #000;
}

nav.navbar ul.navbar-nav a {
    text-decoration: none;
    position: relative;
    display: inline-block;
}
nav.navbar ul.navbar-nav a::after {
    content: '';
    width: 80%;
    position: absolute;
    top: 100%;
    left: 10%;
    height: 2px;
    background-color: #FF7D36;
    transform: scaleX(0);
    transition: transform .35s ease;
}
nav.navbar ul.navbar-nav a:hover::after {
    transform: scaleX(1);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Navigation ein-/ausblenden</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Projekt-Titel</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Start</a></li>
            <li><a href="#ueber">Über</a></li>
            <li><a href="#kontakt">Kontakt</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

蓝藻

我在您的代码段中评论了这一行：

nav.navbar ul.navbar-nav a {
    text-decoration: none;
    position: relative;
    /* display: inline-block; */
}

在这一行中，您覆盖了以下引导规则：

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

您遇到了CSS特殊性问题。

这是更正后的代码段：

/* Navbar */
.navbar-fixed-top{
    top: 80px;
}
.navbar-default{ /* assigning the top bar to the entire navbar div element */
    background-color: #4F4F4F;
}
nav.navbar {
    box-shadow: 0 0 2px 0 #ccc;
}
nav.navbar a {
    color: #FF7D36;
}
nav.navbar ul.navbar-nav a {
    color: #FF7D36;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: #000;
}
nav.navbar ul.navbar-nav a:hover,
nav.navbar ul.navbar-nav a:visited,
nav.navbar ul.navbar-nav a:focus,
nav.navbar ul.navbar-nav a:active {
    background: #000;
}

nav.navbar ul.navbar-nav a {
    text-decoration: none;
    position: relative;
    /* display: inline-block; */
}
nav.navbar ul.navbar-nav a::after {
    content: '';
    width: 80%;
    position: absolute;
    top: 100%;
    left: 10%;
    height: 2px;
    background-color: #FF7D36;
    transform: scaleX(0);
    transition: transform .35s ease;
}
nav.navbar ul.navbar-nav a:hover::after {
    transform: scaleX(1);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Navigation ein-/ausblenden</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Projekt-Titel</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Start</a></li>
            <li><a href="#ueber">Über</a></li>
            <li><a href="#kontakt">Kontakt</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Twitter Bootstrap导航栏悬停效果-过渡边框从中心扩展

Bootstrap 导航栏搜索按钮不在应有的位置

Bootstrap 4，所有导航栏项目正确

Twitter Bootstrap更改导航栏

Bootstrap居中整个导航栏

如何在React.js项目中制作Twitter Bootstrap导航栏

Bootstrap导航栏中心项目

Bootstrap 4折叠的导航栏背景色

更改Bootstrap导航A：活动背景色

bootstrap 4 导航栏固定在顶部，在滑块上方透明，如果滑出滑块则带有背景

Twitter Bootstrap 3.0.3导航栏对齐导航栏标题

Bootstrap 4 导航栏不显示导航栏项目

在导航栏中显示活动项目

导航栏背景色

Twitter Bootstrap将响应式导航栏间隙居中于背景悬停

Bootstrap 3导航栏无法正确过渡

Twitter bootstrap 3导航栏导航栏右导航栏折叠

Bootstrap-删除导航栏边框半径

Bootstrap默认导航栏下拉菜单在折叠模式下具有透明背景吗？

使用Twitter Bootstrap 3修复了导航栏

Twitter Bootstrap中的导航栏颜色

Twitter Bootstrap导航栏未按预期显示

Twitter的Bootstrap 3导航栏的样式

在单击时隐藏Twitter Bootstrap导航栏

Bootstrap 4 让导航栏项目始终在没有按钮的小屏幕上展开

整个 Bootstrap 导航栏都是 png？

Bootstrap 4导航栏活动类

Bootstrap活动菜单更改导航栏高度

如何更改 Bootstrap 导航栏的背景颜色

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档