아코디언 내가 부트 스트랩을 사용하고

Question

다른 열로 배열 재 ... 정보를 작업 3 열 수 없습니다 3.

내가 확장 할 때 내 레이아웃은 1. 두 행, 2 열 첫 번째, 두 번째가 중간 또는 큰 창 제목 (jsfiddle에 "부러진 제목"으로 표시됨)이 오른쪽 열로 올라갑니다. 나는 왜 이것이 일어나고 있는지 알 수 없다!

또한 아코디언은 12 열 너비에서만 작동합니다. JSFiddle이 댓글에 있습니다. http://jsfiddle.net/somedancetoforget/72qb7ere/7/

<div style="margin-bottom:10px; width:100%" class="col-md-12"> 

    <div class="hidden-sm hidden-md hidden-lg "><button type="button" class="btn btn-block btn-warning btn-lg" style="margin-bottom:10px"><strong>+ New </strong></button></div> 
<div class=" col-sm-8 col-md-9 col-lg-8 col-xl-7" style=""> 
    <div class="panel-group widget" id="accordion" style="margin-top:0"> 
     <div class="panel panel-default "> 
       <div class="panel-heading" > 
        <strong> PANEL TITLE </strong> 
      </div> 
      </div> 
     <div class="panel panel-default "> 

      <div class="panel-heading accordion-toggle" style="border-bottom:1px #C1C1C1 solid"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" class="accordion-toggle" data-parent="#accordion" href="#collapseOne"style=" color:#666"><i class=" fa fa-check" ></i> Accordion #1 <span class=" badge badge-aqua">8</span> </a> 
       </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse "> 
       <div class="panel-body"> 
            <ul> 
        <li> Name Name</li> 
             <li> Name Name</li> 

        <li> Name Name</li> 

        <li> Name Name</li> 

        <li> Name Name</li> 

        <li> Name Name</li> 

        <li> Name Name</li> 

</ul> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default "> 
      <div class="panel-heading accordion-toggle collapsed" style="border-bottom:1px #C1C1C1 solid"> 
       <h4 class="panel-title "> 
        <a data-toggle="collapse" class="accordion-toggle" data-parent="#accordion" href="#collapseTwo" ><i class=" fa fa-question" ></i>Accordion #2 <span class=" badge badge-warning">55</span> </a> 
       </h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse out"> 
       <div class="panel-body"> 


       </div> 
      </div> 
     </div> 
     <div class="panel panel-default panel-participants-widget"> 
      <div class="panel-heading accordion-toggle"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" class="accordion-toggle" data-parent="#accordion" href="#collapseThree" style="font-weight:300; color:#999;" > <i class=" fa fa-remove" ></i><em>Accordion 3</em> <span class=" badge badge-violet">2</span> </a> 
       </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse"> 
       <div class="panel-body"> 
          <ul style="margin-bottom:-10px"> 
        <li> Name Name</li> 
             <li> Name Name</li> 


</ul> 
       </div> 
      </div> 
     </div> 

      <div class="panel panel-default "> 
       <div class="panel-heading" > 


      </div> 
      </div> 
    </div> 

</div> 
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-4 col-xl-5" style=" height:100%"> 
    <div style="border: 1px #999 solid; background:#ececec; margin:0px 10px 20px 10px; padding:10px;" > 
    <div class="hidden-xs" ><button type="button" class="btn btn-block btn-warning btn-lg" style="margin-bottom:10px"><strong>+ New </strong></button></div> 

    <div class="hidden-xs twitter-box" ><strong>Twitter</strong></div> 
    </div> 



</div> 

</div> 
<div class="col-md-12" ><div style="width:100%"> BROKEN TITLE<img src="placeholder.png" width="940" height="90" style="background: #999;" ></img></div></div> 

Answer 1

레이아웃은 부트 스트랩의 지침을 사용하여 설계되지 않았습니다. 부트 스트랩 행을 사용하는 것이 아니라 열을 사용하고 있습니다. 이로 인해 플로트가 올바르게 지워지지 않아 문제가 발생합니다.

요소는 모두 container 또는 container-fluid 부트 스트랩 클래스로 div에 래핑되어야합니다. 각 행은 row 부트 스트랩 클래스로 div에 래핑되어야합니다.

또한 중복되거나 불필요한 CSS (예 : col-*-12 클래스의 div는 이미 100 % 너비입니다.)와 같이 코드에 대한 몇 가지 다른 문제가 있습니다. 전체 코드

감소 된 HTML

<div class="container-fluid"> 
    <div style="margin-bottom:10px;" class="row"> 
     ... 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      BROKEN TITLE<img src="placeholder.png" width="940" height="90" style="background: #999;" ></img> 
     </div> 
    </div> 
</div> 

라이브 예 : http://jsfiddle.net/ay5Ld7qy/1/