javascript - 拉伸(stretch) Div 宽度以获取 Bootstrap 容器宽度

Question

我希望覆盖 div 占据整个容器宽度 (col-md-12)。现在当然，它只占用 col-md-4 宽度，这是它的父级。

$(document).ready(function() {

  $('button').click(function() {
    $('#overlay').toggleClass('active');
    // calcs bottom of button 
    var bottom = $(this).position().top + $(this).outerHeight(true);
    $('#overlay').css({
      'top': bottom + 'px',

    });
  });

  $('#close').click(function() {
    $('#overlay').removeClass('active');
  });

});

#overlay {
  z-index: 10;
  margin-left: 15px;
  position: absolute;
  width: 100%;
  background: #E5E5E5;
  text-align: center;
  min-height: 500px;
  display: none;
  left: 0;
}

#overlay.active {
  display: block;
}

<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="row">
  <div class="col-md-4">
    <button type="button" class="btn btn-link">ADD GAME</button>
    <div id="overlay">
      <a href="#" id="close">X</a>
      <h2>This is an overlay</h2>
    </div>
  </div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

Answer 1

设置 position: static; 为 .col-md-4 和 position: relative; 为 .container

$(document).ready(function() {

  $('button').click(function() {
    $('#overlay').toggleClass('active');
    // calcs bottom of button 
    var bottom = $(this).position().top + $(this).outerHeight(true);
    $('#overlay').css({
      'top': bottom + 'px',

    });
  });

  $('#close').click(function() {
    $('#overlay').removeClass('active');
  });

});

#overlay {
  z-index: 10;
  margin-left: 15px;
  position: absolute;
  width: 100%;
  background: #E5E5E5;
  text-align: center;
  min-height: 500px;
  display: none;
  left: 0;
}

#overlay.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .container {
    position: relative;
  }
  
  .col-md-4 {
    position: static;
  }
</style>

<div class=container>

  <div class="row">
    <div class="col-md-4">
      <button type="button" class="btn btn-link">ADD GAME</button>
      <div id="overlay">
        <a href="#" id="close">X</a>
        <h2>This is an overlay</h2>
      </div>
    </div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>

</div>