ブートストラップの崩壊はHTMLボディの残りの部分を取り除きます

ブートストラップを使用して折りたたみを行いますが、それをクリックするたびに残りのボディが下降します。残りの身体を動かすことはできないのですか？これは私のサンプルコードです：ブートストラップの崩壊はHTMLボディの残りの部分を取り除きます

<body> 
    <div class="panel-group"> 
     <div class="panel panel-default"> 
      <div id="collapse1" class="panel-collapse collapse"> 
       <div class="panel-body">Panel Body</div> 
       <div class="panel-footer">Panel Footer</div> 
      </div> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#collapse1">Collapsible panel</a></h4> 
      </div> 
     </div> 
    </div> 
</body>

出典

2016-07-13 Onez

この理由は、あなたの親コンテナの高さが自動であるということです。子コンテナのサイズを変更すると、基本的にサイズが変更されます。

親の高さを設定します。プログラムで固定高さに設定するか、ページの高さの％などに設定できます。これはあなたを助ける

.panel-group 
{ 
    height:100vh; 
}

例here

出典

2016-07-13 10:53:48

希望：

<div class="panel-group"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a> 
       </h4> 
      </div> 

      <div class="collapse" id="collapse1"> 
         <div id="" class="panel-body ">Panel Body</div> 
       <div class="panel-footer">Panel Footer</div> 

       </div> 


     </div> 

     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" href="#collapse2">Collapsible panel</a> 
       </h4> 
      </div> 

      <div class="collapse" id="collapse2"> 
         <div id="" class="panel-body ">Panel Body</div> 
       <div class="panel-footer">Panel Footer</div> 

       </div> 


     </div> 
     </div>

以下は、ページの高さの100％になるだろう

出典

2016-07-13 11:51:53 pradeep

ブートストラップの崩壊はHTMLボディの残りの部分を取り除きます

答えて

関連する問題