折叠

Question

当我的导航栏折叠时，分隔线很大。我该如何自定义或编辑它？请帮助我，我是css和html的新手也是引导程序。提前致谢。我正在使用bootstrap。

这是我的代码。

                                                                                                                                                             

        <div class="collapse navbar-collapse" id="nav-collapse">

            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">Students</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">Faculty</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">About us</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">Contact us</a></li>
              <li class="nav-divider"></li>

            </ul>

               <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    <!-- Modal -->
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                    <!-- Modal content-->
                             <div class="modal-content">
                                 <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                                     <h4 class="modal-title">Modal Header</h4>
                                 </div>
                                 <div class="modal-body">
                                    <p>Some text in the modal.</p>
                                 </div>
                                 <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                 </div>
                             </div>
                            </div>
                       </div>
            </ul>
        </div>

    </div>
</nav>

这是我的css代码。

#fot { 
    position:fixed;
    bottom:0;
}
.navbar-default {
    background-color:rgb(193,57,45);
}
.navbar .nav > li > a {
    color:#ffe6e6;
}
.navbar .nav > li > a:hover {
    color:#000000;
}
.navbar .nav .active > a{
    background-color:rgb(193,57,45);
    color:#000000;
}
.navbar .nav .active > a:hover{
    background:none;
    color:#fff;
}
.nav .nav-divider{
    height: 50px;
    margin: 0 10px;
    border-right: 1px solid #a92419;
    border-left: 1px solid #c1392d;
}
.nav .nav-divider {
    height: 50px;
    margin: 0 10px;
    border-right: 1px solid #a92419;
    border-left: 1px solid #c1392d;
} 

Answer 1

导航栏底部的边框似乎在引导程序中由以下CSS规则着色：

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7; 
}

您可以覆盖此规则以更改其宽度或颜色。

Answer 2

您可以使用媒体查询在各种视口中调整CSS样式。在Bootstrap中构建布局时，这种方法几乎可以派上用场。

如下：

@media (max-width: 768px)
{
   .navbar-default {
      background-color: #fff;
      color: #000;
      padding: 5px;
   }
}

将其放在CSS的底部，您可以调整导航栏的每种样式。在@media中，您只需告诉CSS何时应用您在媒体查询中放置的样式。值为max-width: 768px时，仅当屏幕的视口/大小低于该值时才会生效。如果您将其更改为min-width，则会在其他任何地方设置.navbar-default的样式，但会在我们称之为移动视图的位置重置为默认值。