0

このコンテナの幅全体に黒い .divider を伸ばすにはどうすればよいですか?

幅を 100% に設定しても機能しません。もちろん、内側のコンテナーにはそれに応じてマージンが設定されています。コンテナの外側の余白に幅を設定して、nav コンテナ全体に 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

ご要望に応じてコードを修正しました。

    <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 プロパティのオーバーフローが非表示になっているためです。また、一部のパディングが残っているため、更新されたフィドルを参照して、削除後の変更を確認してください。

    <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 に答える