Html 引导-如何更改导航选项卡底部的线条宽度？

我想知道如何更改

导航选项卡底部行的
宽度

在他们的显示页面上，
nav选项卡
将底部的行分为一部分，刚好在页面末尾之前停止。
但是我的保持在100%，不知道如何更改它的
长度

我试过了，但运气不好

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

你这样问

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


身体{
边际：0px；
}
页脚{
宽度：100%；
边框顶部：2px实心#f00；
}

HTML:



..


..

.nav选项卡{

border-bottom-width: 50px;

}
我已经用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;
}














navWrapper先生{
填充：0 15px；
}

以下是更新后的
希望这能解决您的问题。
没有可用于设置边框长度的属性。我发现唯一的解决方法是使用线性渐变

供参考的图像：
[1] :

.nav选项卡{
边框底部：3倍实心；
边界图像：线性梯度(
90度，
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%
);
边界图像切片：1；
}
我不知道您所说的线的宽度是多少？您好，对不起，我想附上一张图片，但我没有足够的点数。但是所有单词（制表符）下面的（行）宽度，在顶部有不同的制表符，制表符在一条线上。这一行从右边一直延伸到页面的近端（但在我的例子中，这一行一直延伸到最后，我想缩短它），显示html代码。。你可以用这条线，底部的这条线延伸到右手边。在页面的末尾，我想将其缩短。nav-tabs{border-bottom:1px-solid#ddd；}提供如下内容。nav-tabs li{border-bottom:1px-solid#ddd；}
<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;
}