css - Bootstrap 较小的导航栏折叠宽度

Question

我有一个问题，我整天都在寻找答案，但没有找到。代码:

<div class="visible-xs navbar navbar-ti navbar-fixed-top ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar" >
        <span class="glyphicon glyphicon-menu-hamburger white"></span>
      </button>
        <button type="button" class="navbar-toggle collapsed pull-right">
        <span class="glyphicon glyphicon-search white"></span>
      </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="wheretobuy.aspx"  style="color:#fff;" >Where to Buy</a></li>
        <li><a href="cookware.aspx" style="color:#fff;" >Cookware Sets</a></li>
        <li><a href="registration.aspx"  style="color:#fff;" >Register Product</a></li>
        <li><a href="qualitystandards.aspx"  style="color:#fff;" >Quality Standards</a></li>
        <li><a href="customerreviews.aspx"  style="color:#fff;" >Customer Reviews</a></li>
        <li><a href="rvinfo.aspx"style="color:#fff;" >RV Information</a></li>
        <li><a href="marineinfo.aspx"  style="color:#fff;" >Marine Information</a></li>
        <li><a href="aboutus.aspx"  style="color:#fff;" >About Us</a></li>
        <li><a href="contactus.aspx"  style="color:#fff;" >Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

我添加到 bootstrap.css 的内容:

.white {
color: #fff !important; }.navbar-ti {
background-color:#200c03;}

我需要像图片一样设置折叠导航的宽度，我想删除箭头指向的线。 :)

我使用 bootstrap 3.4，我没有对 bootstrap.css 进行任何更改，只是添加了一些类。有人能帮我吗 ？

P.S 抱歉英语不好 :) .

Answer 1

该水平线是由 .navbar-collapse 元素上设置的 box-shadow 属性生成的。在您的 bootstrap.css 中添加以下规则:

.navbar-collapse {  
  box-shadow: 0 0 0; // remove box-shadow
}