拉伸Div寬度採取自舉容器寬度

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>

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的父被定位爲相對(position: relative;)因爲絕對位置的div總是依賴於它的相對父如果沒有那麼它會根據對準這隻會工作HTML頁面。

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>