Question

我正在尝试使用slideToggle来显示我网站的各个部分。在每个部分中，我想使用引导网格系统来布局该部分中的内容。问题是slideToggle重置为没有高度（这似乎是因为

的存在）

{ float: left; }

用于bootstrap col- *元素）。

以下是一个示例：http://jsfiddle.net/rcs2tej0/。我已经将bootstrap col- * css粘贴到小提琴中，并将我自己的一些粘贴在底部。第1节是默认的bootstrap css。第2节删除浮动，但它现在不能正确跟随网格。

Answer 1

我想这就是你想要的：

只需在 CSS 中添加register.php到overflow:auto;即可解决您的问题。

替换代码：

.section-body

<强> Working : Demo

Answer 2

为什么不在bootstrap中使用 collapse ...请检查此DEMO

<body>
    <div class="panel-group" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="section1">
                 <h4 class="panel-title">
                    <a class="collapsed" role="button" 
                       data-toggle="collapse" href="#body1" 
                       aria-expanded="false" aria-controls="body1">
                       Section 1
                    </a>
                  </h4>
            </div>
            <div id="body1" class="panel-collapse collapse"
                 role="tabpanel" aria-labelledby="section1">
                <div class="panel-body">
                    <div class='col-xs-4 col-sm-4'>Hello</div>
                    <div class='col-xs-4 col-sm-4'>I</div>
                    <div class='col-xs-4 col-sm-4'>Am</div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="section2">
                 <h4 class="panel-title">
                    <a class="collapsed" role="button" 
                       data-toggle="collapse" href="#body2" 
                       aria-expanded="false" aria-controls="body2">
                       Section 2
                    </a>
                  </h4>
            </div>
            <div id="body2" class="panel-collapse collapse"
                 role="tabpanel" aria-labelledby="section2">
                <div class="panel-body">
                    <div class='col-xs-4 no-float'>Kyle</div>
                    <div class='col-xs-4 no-float'>Who</div>
                    <div class='col-xs-4 no-float'>Are</div>
                    <div class='col-xs-12 no-float'>You?
                        <button id='add_word'>Add Word</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

jQuery slideToggle with bootstrap

2 个答案: