拉伸Div宽度以采用Bootstrap容器宽度

Question

我希望overlay 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> 

Answer 2

试试这个，我认为这可能对您有用。 不确定，因为您的Q不清楚。我删除了margin-left: 15px就像您放了left:0; 在底部。

#overlay {
  z-index: 10; 
  position: absolute;
  background: #E5E5E5;
  text-align: center;
  min-height: 500px;
  display: none;
  left: 0;
  right:0;/*Added right attribut to make width 100%*/
  top: 0;/*Added top attribut to make your div attach to the top of the parent div*/
}

#overlay.active {
  display: inline-block;
}

这仅在#overlay的父 #overlay 定位为相对 父对象时才有效(position: relative;)因为绝对位置div始终取决于其相对父对象（如果没有），则它将根据HTML Page对齐）。

Answer 3

如何将叠加作为同级添加到row

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