ブートストラップ3 - 固定されたサイドバーからフルカラム幅へ

Question

私は2つのカラム（col-md-8とcol-md-4）を持っています。 2列目には固定サイドバーがあります。サイドバーをcol-md-4列の100％の幅にします。下の画像にある黒いボックスは2番目の列です。

私は幅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

要素がビューポートに関連して（幅など）のすべてを定義することになっています。

jqueryのは、次のコードを使用することができます許可されている場合、それは親のdivだに応じて幅を設定するためにCSSでの唯一の方法は、width:inherit

かです。

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