Bootstrap 3，用于宽度相对于其容器的导航药丸

Question

我有以下麻烦。

假设我有一个容器，其宽度为950px 。 此容器中有一个nav-pills元素，但它的左右两侧都有边距，但是我需要删除这些边距，以使该元素的宽度相对于原始容器而言为100％，就像我在950px之前950px 。 我的代码如下所示：

<div class="container">
    <ul id="mytabs" class="nav nav-pills nav-justified" role="tablist">
        <li><a href="/link" role="tab" data-toggle="tab">link1</a></li>
        <li class="active"><a href="/link2" role="tab" data-toggle="tab">link2</a></li>
        <li><a href="/link3" role="tab" data-toggle="tab">link3</a></li>
        <li><a href="/link4" role="tab" data-toggle="tab">link4</a></li>
    </ul>
</div>

和CSS的.container ：

.container {
    width: 950px;
}

到目前为止，我尝试了多种方法来实现它，例如，给width: 100%药丸width: 100% ，但仍然没有运气。 这是一个jsfiddle ，可让您更好地了解我的问题。

Answer 1

我认为，您的意思是这样的： https : //jsfiddle.net/z3d9984p/2/

所以我删除填充以获得100％的宽度

.container {
  width: 950px !important;
  padding-right:0;
  padding-left:0
}

Answer 2

由于容器类的padding-left and padding-right而更新了这种情况

工作片段

 .container { width: 950px !important; padding-left: 0px !important; padding-right:0px !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <ul id="mytabs" class="nav nav-pills nav-justified" role="tablist"> <li><a href="/link" role="tab" data-toggle="tab">link1</a></li> <li class="active"><a href="/link2" role="tab" data-toggle="tab">link2</a></li> <li><a href="/link3" role="tab" data-toggle="tab">link3</a></li> <li><a href="/link4" role="tab" data-toggle="tab">link4</a></li> </ul> </div>