Twitter bootstrap 如何将分隔器（用于导航）100%拉伸至集装箱宽度？

我怎样才能把这个黑色的分隔条伸展到这个容器的整个宽度

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

将宽度设置为100%不起作用。当然，内部容器已相应地设置了边距。如何将宽度设置为外部容器边距，使其看起来像是在导航容器上100%拉伸

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

小提琴：

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

---

它没有显示高达100%，因为上面有CSS属性溢出隐藏，而且它还有一些空白，请查看更新的fiddle以查看删除它们后的更改

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

    <div class="container" style="width: 1300px">
  <div class="row-fluid">

      <div class="well sidebar-nav left">
        <ul class="nav nav-list"style="width:100%; padding-left:0px;">
         <li class="divider"></li>
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->



    </div><!--/span-->
  </div><!--/row-->                

侧栏

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

---

填充来自

ul

列表，因此您可以尝试在列表之前使用div。这将达到100%

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

HTML

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

<div class="well sidebar-nav left">
    <div class="divider"></div>
    <ul class="nav nav-list">
        <li class="nav-header">Sidebar</li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

更新

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

我想我找到了一个更好的解决方案，它不需要对标记进行任何更改，现在您可以在列表中的任何位置使用

li、divider

。将此添加到CSS中：

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

.nav-list {
    padding: 0;
}
.nav-list > li > a, .nav-list .nav-header {
    margin: 0;
}

---

我可以找到两种方法来解决这个问题：

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

1。只需编辑CSS即可使用负边距（不是很动态，但快速简单）。

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

我添加了以下内容以获得正确的效果：

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

.nav-list .divider {
    margin-left: -12px;
    margin-right: -12px;
}

这样做的缺点是，它取决于您不更改任何大小或缩放

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

2。使用一些javascript/jQuery。

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

或者，您可以使用一点jQuery（假设您已经在使用该菜单），这样页面打开的大小就无关紧要了。我用了这个小片段：

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

var resizeDivider = function() {
    var navWidth = $('.sidebar-nav').width();
    var navIndent = $('.nav-header').css('margin-left');
    var divider = $('.divider');
    divider.width(navWidth);
    divider.css('margin-left', navIndent);
}
$(function () {
    resizeDivider();
});

---

不过，根据您的用例，这可能有点过于苛刻。不过，其中一个解决方案应该适合您

我根据您的要求修改了代码

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

    <div class="container" style="width: 1300px">
  <div class="row-fluid">

      <div class="well sidebar-nav left">
        <ul class="nav nav-list" style="width:100%; padding-left:0px;">
            <li class="divider"></li></ul>
          <ul class="nav nav-list">
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->



    </div><!--/span-->
  </div><!--/row-->                

侧栏

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->                

---

检查fiddele

正常-冷却！但是，如何保持导航菜单项左侧的填充，以及如何将溢出的栏固定到导航的右侧？我希望有更无缝的东西（可能不可能），而不是必须进去重新设计所有的东西（右边的横杆，菜单项的填充物），仅仅为了让分隔器拉伸100%？不确定是否有每一个简单的样式答案。=）嗯，我认为这比添加另一个ul（额外标记）和内联样式要好我喜欢你的代码！然而，要想扭转这个局面，我应该如何在“侧边栏”之后加入分隔符呢？既然它在

范围内，我怎么才能绕过它？您是对的，您只能在

ul

之外使用此方法，因此您无法在两个链接之间放置潜水员，而不将列表一分为二。但是，如果您试图对.nav标题进行样式化，我会这样做。但是，如果你考虑一下被接受的答案，如果你想在列表中加一个分隔符，那么它也会让你把列表一分为二，而且还会增加更多额外的内容markup@JaJ更新只添加新的CSS解决方案，你会考虑修改你接受的答案吗？我相信我为你的问题提供了两个更好的解决方案

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->