jquery - Accordion 用 bootstrap 3 列坏了不工作......信息重新排列到不同的列中

Question

我正在使用 bootstrap 3。

我的布局有两行，第一行有 2 列，第二行有 1 列。当我将窗口扩展到中型或大型时，标题(在 jsfiddle 上列为“损坏的标题”)跳到右列。我不明白为什么会这样!

此外， Accordion 仅适用于 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

您的布局不是根据 Bootstrap 的指南设计的。您不是在使用 Bootstrap 行，而是在使用列。这会导致您的 float 无法正确清除，这就是造成您所看到的问题的原因。

您的元素都应该用 container 或 container-fluid Bootstrap 类包装在一个 div 中。每行都应该用 row Bootstrap 类包裹在一个 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/