引导程序工作不正常

我在'main'id上使用了折叠，但在加载页面时它不会折叠。单击后，它会折叠并正常工作。我没有使用"塌陷"，所以我不知道为什么会发生这种情况。

当我点击标题时，容器会膨胀，然后有点笨拙地重新调整。请检查代码，希望你能理解我的担忧。

另外，我所尝试的也不起作用。我在标题行中创建了两列。但是这些div不能正常工作——带有col-xs-2的div流到另一列的底部。我要他们并排。同样的事情也发生在我在"main"中使用的两个按钮上。我希望这能解释我所有的问题。请检查代码

<!DOCTYPE html>
<html>
<head>
<title>ABC</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src ="jquery-2.0.3.min.js"></script>
<script src ="bootstrap.min.js"></script>
</head>
<body>

         <div class="container" id="container">
                <div class="row" id="header">
                    <div class="col-xs-10" id="logo" data-toggle="collapse" data-target="#main">ABC</div>
                    <div class="col-xs-2" id="arrow-down">Arrow</div>            
               </div>
               <div class="row" class="collapse" id="main">
                    <div class="col-xs-12">
                        <div class="row">
                            <div class="col-xs-6" id="button1">
                                <button type="button" class="btn btn-primary active">Detail1</button>
                            </div>
                            <div class="col-xs-6" id="button2">
                                <button type="button" class="btn btn-primary disabled">Detail2</button>
                            </div>
                        </div>
               </div>
               </div>
        </div>

</body>
</html>

CSS部分

*{
        margin: 0;
        padding: 0;
    }
#container{
    width:450px;
    border: 1px solid black;
    height: auto;
}
#header{
    background-color: #6C6D70;
    border-bottom: 5px solid #2DB5AB;
    height: 50px;
}
#logo{
    padding:10px;
    font-size: 18px;
    font-family: sans-serif;
    font-weight: bold;
    color: #FFFFFF;
}
#arrow-down{
    color:black;
    font-size: 18px;
    padding: 15px 10px 10px 10px;
    border: 1px;
}
#main{
    padding: 10px;
}
#video-detail{

}
#buttons{
    padding:10px;
    margin: 0 auto;
    border: 1px solid black;
}

尝试将CSS类"collapse"添加到#main元素

<div class="row collapse" class="collapsed" id="main">

Js文件：http://jsfiddle.net/yru9hf7t/

我希望这将帮助

Html

<div class="container" id="container">
    <div class="row" id="header">
        <div class="col-xs-10" id="logo" data-toggle="collapse" data-target="#main">ABC</div>
        <div class="col-xs-2" id="arrow-down">Arrow</div>
    </div>
    <div class="row collapse" class="collapsed" id="main">
        <div class="col-xs-12">
            <div class="row mystyle">
                <div class="col-xs-6" id="button1">
                    <button type="button" class="btn btn-primary active">Detail1</button>
                </div>
                <div class="col-xs-6" id="button2">
                    <button type="button" class="btn btn-primary disabled">Detail2</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#container {
    width:450px;
    border: 1px solid black;
    height: auto;
}
#header {
    background-color: #6C6D70;
    border-bottom: 5px solid #2DB5AB;
    height: 50px;
}
#logo {
    padding:10px;
    font-size: 18px;
    font-family: sans-serif;
    font-weight: bold;
    color: #FFFFFF;
}
#arrow-down {
    color:black;
    font-size: 18px;
    padding: 15px 10px 10px 10px;
    border: 1px;
}
.mystyle{
    padding:20px;
}
#buttons {
    padding:10px;
    margin: 0 auto;
    border: 1px solid black;
}

工作小提琴：http://jsfiddle.net/iamraviteja/ryqgm0ra/

相关内容

最新更新

热门标签：