Question

我在'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;
}

Answer 1

尝试添加CSS类＆＃34;崩溃＆＃34;到#main元素

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

Jsfiddle：http://jsfiddle.net/yru9hf7t/

Answer 2

我希望这会有所帮助

<强> 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/

Bootstrap无法正常工作

2 个答案: