1. ホーム
  2. 質問と答え
  3. 最初と最後のdivをブートストラップの崩壊で修正する方法は？

最初と最後のdivをブートストラップの崩壊で修正する方法は？

2016-11-18 8 views
0

ここで私はpanel1とpanel10を固定したいので、ユーザーはこれらのdivを常に見ることができます。これを行う方法 ？最初と最後のdivをブートストラップの崩壊で修正する方法は？

私は1つのアコーディオン内に解決策が必要です。私は に3つのアコーデオンを解決できません。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
<div style="height:300px;overflow:scroll;"> 

    <div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading panel1"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
     </h4> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse in"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
     </h4> 
     </div> 
     <div id="collapse2" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
     </h4> 
     </div> 
     <div id="collapse3" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 


    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Collapsible Group 4</a> 
     </h4> 
     </div> 
     <div id="collapse4" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 


    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group5</a> 
     </h4> 
     </div> 
     <div id="collapse5" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Collapsible Group6</a> 
     </h4> 
     </div> 
     <div id="collapse6" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse7">Collapsible Group 7</a> 
     </h4> 
     </div> 
     <div id="collapse7" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse8">Collapsible Group8</a> 
     </h4> 
     </div> 
     <div id="collapse8" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Collapsible Group 9</a> 
     </h4> 
     </div> 
     <div id="collapse9" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading panel10"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse10">Collapsible Group 10</a> 
     </h4> 
     </div> 
     <div id="collapse10" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 




    </div> 
</div> 
    </div> 
</body> 
</html>

私は、これら二つのdivのための固定位置を=しようとしたが、その時はスタイルがlostingされます。

.panel1, .panel10{ 
position:fixed 
}

折りたたみ可能にしたい1と折りたたみ可能10を固定します。折りたたみ可能な部分は上にあり、折りたたみ可能な部分は下にあります。 https://jsfiddle.net/tommisely/75h4d0gf/ 助けてください。

出典

2016-11-18 Anonymous

+1

あなたはjsfiddleやコードスニペットにそれを追加することはできますか？ –

+0

スタイルが失われるという意味ですか？そのエラーを与えるか、または何も働かないか？ – Rajdeep

+0

最初と最後のパネルをラッパーから外に出すことができます。 – secelite

答えて

0

これを使用できます。アコーディオンで固定ヘッダーとフッターへのリンク

`https://jsfiddle.net/rizkidwip/75h4d0gf/2/` 


#accordion1 { 
 
    margin-bottom: 4px; 
 
} 
 
#accordion2 { 
 
    height: 150px; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
    margin-bottom: 5px; 
 
} 
 
#accordion3 { 
 
    margin-top: 5px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div style="height:400px;overflow:scroll;"> 
 

 
    <div class="panel-group" id="accordion1"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading panel1"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse1" class="panel-collapse collapse in"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--end acc1--> 
 
    <div class="panel-group" id="accordion2"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse2" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse3" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 

 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Collapsible Group 4</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse4" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 

 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group5</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse5" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Collapsible Group6</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse6" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse7">Collapsible Group 7</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse7" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse8">Collapsible Group8</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse8" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 

 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Collapsible Group 9</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse9" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!--end acc2--> 
 
    <div class="panel-group" id="accordion3"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading panel10"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapse10">Collapsible Group 10</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse10" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div>

出典

2016-11-18 14:36:31 RizkiDPrast

+0

ありがとうございます。この回答は機能しています。しかし、方法は私が期待したものではありません。私は3つのアコーディオンを作ることができません。私は1つのアコーディオンで解決策が必要です –

関連する問題

 関連する問題