引导程序3导航栏填充和项目背景

安德烈·P

我正在使用bootstrap 3建立网站。谁能告诉我如何删除菜单项的填充/边距?当前看起来像这样:

Bootstrap 3导航栏

我也希望在悬停项目时使用不同的链接颜色。我的代码当前是这样的:

  <!-- Start main navigation -->
  <nav class="navbar navbar-custom" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
      </div>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">Politica</a></li>
        <li class="headerDivider"></li>
        <li><a href="#">Societate</a></li>
        <li><a href="#">Economie</a></li>
        <li><a href="#">Extern</a></li>
        <li><a href="#">Stil de viata</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>

CSS:

.navbar-custom {
    background-color:#303334;
    color:#ffffff;
border-radius:0;
margin-bottom: 0;
}

.navbar-custom .navbar-nav > li > a {
color:#fff;
padding-left:20px;
padding-right:20px;
}

.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav >      .active > a:focus {
color: #ffffff;
background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #007faa;
}

.navbar-custom .navbar-brand {
color:#eeeeee;
}

.navbar-custom .navbar-toggle {
background-color:#eeeeee;
}

.navbar-custom .icon-bar {
background-color:#007faa;
}

.navbar-nav {
font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;    
text-transform: uppercase;
}

.fa-home {
font-size: 1.2em;
}

.navbar-nav>li {
margin-right: 15px;
}

谢谢。

SW4

基于此小提琴,您可以使用以下方法删除填充:

.navbar {
    border: none; /* optional depending on your requirements */
}

.nav > li > a {
    padding:0;
    margin:0;
}

要添加不同的悬停状态颜色,可以使用例如:

.nav > li > a:hover {
    color:red;
}

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导程序导航栏中的神秘填充

来自分类Dev

引导程序-流体导航栏项目

来自分类Dev

引导程序-流体导航栏项目

来自分类Dev

引导程序导航栏间距和居中

来自分类Dev

引导程序3上的透明导航栏

来自分类Dev

新引导程序之后,导航栏和项目之间没有空格?

来自分类Dev

引导程序更改导航栏.active背景色

来自分类Dev

设置导航栏的背景图像-引导程序

来自分类Dev

引导程序更改导航栏.active背景色

来自分类Dev

更改导航栏的背景颜色(引导程序/创世纪)

来自分类Dev

更改引导导航栏背景颜色和字体颜色

来自分类Dev

引导程序“导航栏品牌”导致“导航栏导航”项目从导航栏中的居中位置向右移动?

来自分类Dev

引导程序“导航栏品牌”导致“导航栏导航”项目从导航栏中的居中位置向右移动?

来自分类Dev

引导导航栏徽标在中心,项目在左侧和右侧

来自分类Dev

Fancybox 3 和导航引导程序问题

来自分类Dev

如何使引导程序导航栏右拉的项目正确对准导航栏

来自分类Dev

引导程序4更改导航栏高度,导致导航栏项目未垂直居中

来自分类Dev

引导程序:导航栏问题

来自分类Dev

引导程序3:将Buttongroup添加到导航栏

来自分类Dev

导航栏上的徽标溢出(引导程序3)

来自分类Dev

引导程序3-> 5导航栏可折叠

来自分类Dev

引导程序3:将Buttongroup添加到导航栏

来自分类Dev

引导程序3:修改导航栏时遇到问题

来自分类Dev

导航栏上的徽标溢出(引导程序3)

来自分类Dev

减少引导程序3中导航栏的高度

来自分类Dev

动态引导程序3导航栏固定的顶部重叠内容

来自分类Dev

引导程序4中导航栏的自适应调整时导航项的背景颜色

来自分类Dev

删除引导导航栏上的顶部填充

来自分类Dev

导航栏引导程序 3 在引导程序 4 中不起作用

Related 相关文章

  1. 1

    引导程序导航栏中的神秘填充

  2. 2

    引导程序-流体导航栏项目

  3. 3

    引导程序-流体导航栏项目

  4. 4

    引导程序导航栏间距和居中

  5. 5

    引导程序3上的透明导航栏

  6. 6

    新引导程序之后,导航栏和项目之间没有空格?

  7. 7

    引导程序更改导航栏.active背景色

  8. 8

    设置导航栏的背景图像-引导程序

  9. 9

    引导程序更改导航栏.active背景色

  10. 10

    更改导航栏的背景颜色(引导程序/创世纪)

  11. 11

    更改引导导航栏背景颜色和字体颜色

  12. 12

    引导程序“导航栏品牌”导致“导航栏导航”项目从导航栏中的居中位置向右移动?

  13. 13

    引导程序“导航栏品牌”导致“导航栏导航”项目从导航栏中的居中位置向右移动?

  14. 14

    引导导航栏徽标在中心,项目在左侧和右侧

  15. 15

    Fancybox 3 和导航引导程序问题

  16. 16

    如何使引导程序导航栏右拉的项目正确对准导航栏

  17. 17

    引导程序4更改导航栏高度,导致导航栏项目未垂直居中

  18. 18

    引导程序:导航栏问题

  19. 19

    引导程序3:将Buttongroup添加到导航栏

  20. 20

    导航栏上的徽标溢出(引导程序3)

  21. 21

    引导程序3-> 5导航栏可折叠

  22. 22

    引导程序3:将Buttongroup添加到导航栏

  23. 23

    引导程序3:修改导航栏时遇到问题

  24. 24

    导航栏上的徽标溢出(引导程序3)

  25. 25

    减少引导程序3中导航栏的高度

  26. 26

    动态引导程序3导航栏固定的顶部重叠内容

  27. 27

    引导程序4中导航栏的自适应调整时导航项的背景颜色

  28. 28

    删除引导导航栏上的顶部填充

  29. 29

    导航栏引导程序 3 在引导程序 4 中不起作用

热门标签

归档