拉伸Div宽度以获取Bootstrap Container宽度

时间:2017-08-09 09:05:48

标签: javascript jquery html css twitter-bootstrap

我希望overlay div采用完整的容器宽度(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>
&#13;
<table border="1" style="width: 300px">
    <tr>
        <th>User name</th>
        <th>Default Heading</th>
    </tr>
    <tr th:each="user : ${listUser}">
        <td th:text="${user.username}">Default username</td>
        <td>Default enabled</td>
    </tr>
</table>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

position: static;设为.col-md-4,将position: relative;设为.container

&#13;
&#13;
$(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');
  });

});
&#13;
#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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

试试这个我觉得这可能对你有用。我不确定,因为您的 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 定位为相对 (position: relative;)时才会有效,因为绝对位置div总是依赖于< strong>亲属如果没有,那么它将根据 HTML页面进行对齐。

答案 2 :(得分:0)

如何将叠加作为兄弟添加到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>