在Bootstrap中折叠时定义最小高度

Question

在Bootstrap中，我想在崩溃时设置高度。通常我想保持使用.collapse.in类显示可折叠区域。所以当它崩溃时，它不会将高度设置为零。

崩溃之前：

崩溃后：

Answer 1

<强>更新

http://jsfiddle.net/R6EAW/1158/

<强> CSS：

#collapseOne{
    min-height:60px
}

<强> JQ：

$('#accordion').on('hidden.bs.collapse', function () {
    $('#collapseOne').removeClass('collapse').css({        
        'overflow': 'hidden',
        'height': '60px'
    })
})

Answer 2

由于我在多个元素上需要这个，我在上面的@ dm4web的答案中创建了一个更通用的函数，它迭代了具有.collapse类和指定min-height的元素并将逻辑应用于所有这些。

HTML示例：

<!-- start fully shown, collapse down to 120px !-->
<div id="div1" class="collapse in" style="min-height: 120px;"> ... </div>

<!-- start collapsed at 6em !-->
<div id="div2" class="collapse in collapsed" style="min-height: 6em;"> ... </div>

Javascript代码：

$(".collapse")
    .filter(function(ix,el){
        // return only the ones with min-height
        return $(el).css("min-height");
    })
    .each(function(ix, el){

        var  $el = $(el)
            // remember the original min-height
            ,minHeight = $el.css("min-height");

        $el.on("hidden.bs.collapse", function(){

            $el.removeClass("collapse")
                .css({
                     "overflow": "hidden"
                    ,"height": minHeight
                })
        });

        // collapse element on load if it has the class .collapsed 
        if ($el.hasClass("collapsed"))
            $el.collapse();
    });

Answer 3

这里是没有JS的示例，是用SCSS编写的

class StudentPersonalQs(FlaskForm):
gender = RadioField('Gender', choices = [('Male','Male'),('Female','Female')])
age = SelectField('Age', choices = [('12', '12'), ('13', '14'),('15', '15'), ('16', '16'),('17', '17'), ('18+', '18+')])
submit = SubmitField('Signup')