Question

:) 我用我的自举固定底部导航栏摆弄了。
它的工作有点.. 但我的导航栏链接不合理..我尝试了一切我能想到的... 我希望它具有响应性，所以我很好地拥有（60px填充）代码是我想出的最好的代码， - 如果它调整大小，看起来很麻烦...... :( 很多!!!

    <!--NAVBAR-->
    <nav class="navbar navbar-default navbar-fixed-bottom" 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>
          <li class="active"><a class="navbar-brand" href="#"><img src="Bilder/grafik4.jpg" type="picture/jpg"/></a></li>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">

            <li><a href="#">F</a></li>
            <li><a href="#">Z</a></li> 
            <li><a href="#">V</a></li>
            <li><a href="#">Ns</a></li>
            <li><a href="#">Englisch</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Kontakt und Impressum<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">A</a></li>
                <li><a href="#">Kontakt</a></li>
                <li class="divider"></li>
                <li><a href="#">Webseitengestaltung</a></li>
                <li><a href="#">Foto und Film</a></li>
                <li class="divider"></li>
                <li><a href="#">Copyright 2014</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!--NAVBAR ENDE-->

自定义css（除了我使用bootstrap 3之外）：

` 
.navbar-brand {
float: left;
font-size: 18px;
height: 50px;
line-height: 20px;
padding-left: 40px;
padding-top:5px;
text-decoration: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {

background-color: transparent;
color:black;
text-decoration:underline;
}


.navbar-default .navbar-nav > li > a {
color: grey;
text-decoration: none;
width: 100%;
padding-left:60px;
}


.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
size: 60px;
margin: 14,82% 0 0 10%;
}

.navbar-default {

background-color: #FFFFFF;
border-color: #E7E7E7;
}

.dropdown-menu > li > a {
color: grey;

}
.dropdown-menu> li > a:hover,
.dropdown-menu> li > a:focus {
background-color: transparent;
color:black;
text-decoration:underline;
}
`

Answer 1

检查此解决方案（如果我理解你想要的话）。的 JsFiddle ：

我刚刚将<ul class="nav navbar-nav">替换为<ul class="nav custom-menu nav-justified">。
nav-justified由bootstrap提供。

我也对你的CSS进行了一些修改。

<强> HTML：

 <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="container-fluid">  <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> <li class="active"><a class="navbar-brand" href="#"> <img src="http://placehold.it/20x20" type="picture/jpg" /></a> </li> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav custom-menu nav-justified"> <li><a href="#">F</a></li> <li><a href="#">Z</a></li> <li><a href="#">V</a></li> <li><a href="#">Ns</a></li> <li><a href="#">Englisch</a> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Kontakt und Impressum <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">A</a></li> <li><a href="#">Kontakt</a></li> <li class="divider"></li> <li><a href="#">Webseitengestaltung</a></li> <li><a href="#">Foto und Film</a></li> <li class="divider"></li> <li><a href="#">Copyright 2014</a></li> </ul> </li> </ul> </div>  </div>  </nav> 

<强> CSS：

.navbar-default .custom-menu > li a { color: grey; } .dropdown-menu > li > a:hover { color: white; } .custom-menu > li > a { padding-top: 15px; padding-bottom: 15px; } .navbar-default { background-color: #FFFFFF; border-color: #E7E7E7; } .custom-menu > li > a:hover { background-color: transparent; color:black; text-decoration:underline; } .navbar-default .dropdown.open { background-color: #eee; color:black; text-decoration:underline; } .nav>li>a{ padding:15px 0; }

<小时/> 修改的 JsFiddle

要像以前一样制作下拉菜单，请添加以下内容：

为id="menu"元素添加ul：

添加新的css类。它们在折叠时需要与中心菜单项对齐：

.navbar-NAV { 保证金：继承！重要; }

当切换按钮可见时，添加将custom-menu类替换为navbar-nav类的javascript;否则它会做相反的事情。

$(function () { $(window).resize(function () { changeMenu(); }); changeMenu(); function changeMenu() { if ($(".navbar-toggle").is(":visible")) { $("#menu").removeClass("custom-menu").addClass("navbar-nav"); } else { $("#menu").removeClass("navbar-nav").addClass("custom-menu"); } } });

Answer 2

不确定这是否是你所追求的，但是here is a codepen在页面底部有一个固定的菜单。它使用text-align:center为ul居中。导航栏随着窗口调整大小而“响应”。但是，对于正确的响应式设计，您应该使用@media queries为不同的设备设置特定的规则。

希望这会有所帮助。

固定底部导航栏 - 如何使链接分散在完整大小和负责任（％？）navbar-justified不会工作

2 个答案: