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>