0

如何将黑色 .divider 拉伸到该容器的整个宽度？

将宽度设置为 100% 是行不通的，当然内部容器有相应的边距设置。如何将宽度设置为外部容器边距，使其看起来像 100% 延伸到导航容器？

小提琴：http: //jsfiddle.net/W3Dh3/

在此处输入图像描述 

      <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-->                


body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}
.row-fluid > .sidebar-nav {
    width: 220px;
}
.left {
    float:left;
}
.divider {
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;     
}
4

4 回答 4

1

填充来自ul列表，因此您可以尝试在列表之前使用 div。这将拉伸 100%。

HTML

<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>

CSS

.divider {
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    height: 1px;
}

示例小提琴

更新

我想我找到了一个更好的解决方案，不需要对标记进行任何更改，现在您可以li,divider在列表中的任何位置使用。将此添加到您的 CSS 中：

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

新小提琴

于 2013-07-22T06:06:43.540 回答
1

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

    <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-->

检查小提琴http://jsfiddle.net/W3Dh3/10/

于 2013-07-22T06:11:25.293 回答
0

它没有显示到 100%，因为上面隐藏了 CSS 属性溢出，也有一些 padding-left，请参阅更新的小提琴以查看删除后的更改

    <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-->

http://jsfiddle.net/W3Dh3/8/

于 2013-07-22T05:48:35.347 回答
0

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

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

我添加了这个以获得正确的效果：

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

这样做的缺点是它取决于您不更改任何尺寸或缩放。

2. 使用一些javascript/jQuery。

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

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();
});

不过，根据您的用例，这可能有点笨拙。不过，其中一种解决方案应该适合您！

于 2013-07-22T06:08:38.397 回答