bootstrap 3 - 固定侧栏到全列宽

Question

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

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

这是我的HTML。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>