如何使用全寬內容創建Bootstrap可摺疊面板而不折疊其他列？

Question

我想創建一個響應式網格來顯示單擊時顯示細節的項目，我可以讓它展開，但我的問題是旁邊的元素被點擊倒塌擴展內容，我不想這樣做，我想保留的所有項目在頂部，並在內容擴展以下

這是我現在有：

$(document).ready(function(){ 
$("#btn").click(function(){ 
    $("#toggleDemo").collapse('toggle'); 
}); 
$("#btn2").click(function(){ 
    $("#toggleDemo2").collapse('toggle'); 
}); 
$("#btn3").click(function(){ 
    $("#toggleDemo3").collapse('toggle'); 
});}); 

HTML：

<div class="bs-example"> 
<!-- Trigger Button HTML --> 
<input type="button" id="btn" class="btn btn-primary" value="Toggle Button"> 
    <div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. </div> 
<input type="button" id="btn2" class="btn btn-primary" value="Toggle Button 2"> 
    <div id="toggleDemo2" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript.</div> 
<input type="button" id="btn3" class="btn btn-primary" value="Toggle Button 3"> 
<!-- Collapsible Element HTML --> 
<div id="toggleDemo3" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via JavaScript. </div> 

如果您有任何關於如何acomplish任何想法，我會apreciate它

Answer 1

試試這個，

你甚至都不需要JavaScript的

<div> 
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" value="Toggle Button"> 
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample2" value="Toggle Button 2"> 
<input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample3" value="Toggle Button 3"> 
</div>  

<div class="collapse" id="collapseExample"> 
    content 
</div> 
<div class="collapse" id="collapseExample2"> 
    content 2 
</div> 
<div class="collapse" id="collapseExample3"> 
    content 3 
</div> 

Demo in fiddle

Answer 2

這可以使用自定義Jquery代碼而不是引導程序。檢查以下代碼

jQuery的

$(document).ready(function(){ 
    $(".btn-primary").click(function(){ 
     $(this).next('.collapse').slideToggle(); 
    }); 
}); 

HTML

<div class="collapses-panel"> 
    <input type="button" id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" value="Toggle Button"> 

    <div class="collapse" id="collapseExample"> 
    content 
    </div> 
    <input type="button" id="btn2" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample2" value="Toggle Button"> 
    <div class="collapse" id="collapseExample2"> 
    content 2 
    </div> 
    <input type="button" id="btn3" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample3" value="Toggle Button"> 

<div class="collapse" id="collapseExample3"> 
    content 3 
</div> 
</div> 

CSS

.collapses-panel { 
    position: relative; 
} 
.btn-primary{ 
    display: block; 
} 
.collapse { 
    display: none; 
    background-color: gray; 
} 
@media (min-width: 768px) { 
    .collapse { 
    position: absolute; 
    left: 0; 
    top: 40px; 
    width: 100%; 
    } 
    .btn-primary{ 
    display: inline-block; 
    } 
} 

演示小提琴：http://jsfiddle.net/nikhilvkd/ft4mnynh/7/