Question

我遇到了以下麻烦。

假设我有一个容器，其宽度为950px。这个容器中有一个nav-pills元素，但是左边和右边都有边距，但我需要删除这些边距以保持此元素的宽度为100％，相对于原始容器，宽度为正如我在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>

.container的css：

.container {
    width: 950px;
}

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

Answer 1

我想，你的意思是：https://jsfiddle.net/z3d9984p/2/

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

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

Answer 2

updated fiddle 这是因为容器类的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>

Bootstrap 3，导航丸的全宽，与其容器有关

2 个答案: