Question

我想知道如何更改width底部的行的nav-tabs。

在其显示页面http://getbootstrap.com/components/上，nav-tabs部分底部的行停在页面结尾之前。但我的保持在100％，想知道如何更改<{p>}的length

我试过这个，但没有运气。

.nav-tabs {
    border-bottom-width: 50px;
    border-width: 50px;
}

Answer 1

.nav-tabs {

border-bottom-width: 50px;

}

Answer 2

我用div包装ul并在其上设置左右填充

<div class="navWrapper">
    <ul class = "nav nav-tabs " role="tablist">    
        <li class="active" id="opened"><a href= "#" >Open </a></li>
        <li id="completed"><a href ="completedlisting.html" >Completed </a></li>
        <li id="completed"><a href ="Interestedclientsgeneral.html" >Test</a></li>
        <li  class="dropdown"id="reload33" ><a href= "#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-filter "></i></a>
            <ul class="dropdown-menu">
            <li><a href="#" id="all">Show all Results</a></li>
            <li><a href="#" id="thisweek">Posted This week</a></li>
            <li><a href="#" id="thismonth">Posted This Month</a></li>
            </ul>
        </li>
    </ul>
</div>



.navWrapper{
    padding:0 15px;
}

此处是更新的 jsFiddle link 希望这能解决你的问题。

Answer 3

你是这样问的吗？

 <style>
 body{
    margin:0px;
 }
 footer{
     width:100%;
     border-top:2px solid #f00;
 }
 </style>

HTML：

 <body>
  <header>
      <ul class="nav-tabs">
        <li>..</li> 
      </ul>
  </header>
  <footer>
      <ul class="nav-tabs">
        <li>..</li> 
      </ul>
  </footer>
  </body>

Answer 4

没有可用于设置边框长度的属性。我发现的唯一解决方法是使用线性渐变。

图片供参考： [1]：https://i.stack.imgur.com/TCyJ7.png

.nav-tab {
  border-bottom: 3px solid;
  border-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 33%,
    rgba(255, 0, 0, 1) 33%,
    rgba(255, 0, 0, 1) 66%,
    rgba(255, 255, 255, 1) 66%,
    rgba(255, 255, 255, 1) 100%
  );
  border-image-slice: 1;
}

Bootstrap-如何更改导航标签底部的线宽？

4 个答案: