bootstrap 3 - 固定侧栏到全栏宽度

Question

我有两列（col-md-8和col-md-4）。第二列包含一个固定的侧栏。我希望侧栏是col-md-4栏的100％宽度。如下图所示的黑框是第二列。

我试过宽度为100％，但不起作用。

这里是我的HTML。

.col-md-4 { 
 
    border-style: solid; 
 
} 
 
.sidebar-nav-fixed { 
 
    height: 100%; 
 
    width: 15%; 
 
    text-align: center; 
 
} 
 
.well { 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8"> 
 
     <div class=""> 
 
     <h1>Hello, world!</h1> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="sidebar-nav-fixed affix"> 
 
     <div class="well" id="world"> 
 
      <ul class="nav "> 
 
      <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> 
 
      <li class="nav-header">Sidebar</li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li class="nav-header">Sidebar</li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!--/.well --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--/row--> 
 
</div>

Answer 1

position:fixed元件应该以限定相对于视口的一切（包括宽度）。

在CSS的唯一方法根据宽度设置为它的父DIV是width:inherit

，或者如果jQuery是允许的，你可以使用下面的代码。

$(document).ready(function() { 
 
    var new_width = $('.col-md-4').width(); 
 
    $('.sidebar-nav-fixed').width(new_width); 
 
}) 
 
$(window).resize(function(){ 
 
    var new_width = $('.col-md-4').width(); 
 
    $('.sidebar-nav-fixed').width(new_width); 
 
})

.col-md-4 { 
 
    border-style: solid; 
 
} 
 
.sidebar-nav-fixed { 
 
    height: 100%; 
 
    width: 15%; 
 
    text-align: center; 
 
} 
 
.well { 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8"> 
 
     <div class=""> 
 
     <h1>Hello, world!</h1> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="sidebar-nav-fixed affix"> 
 
     <div class="well" id="world"> 
 
      <ul class="nav "> 
 
      <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> 
 
      <li class="nav-header">Sidebar</li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li class="nav-header">Sidebar</li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!--/.well --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--/row--> 
 
</div>