我在'main'id上使用折叠,但是当页面加载时它不会折叠。一旦你点击它崩溃并正常工作。我不使用'折叠',所以我不知道为什么会发生这种情况。Bootstrap无法正常工作
当我点击标题容器扩展,然后它的一种笨拙重新调整。请检查代码,希望您能理解我的疑虑。
另外我正在尝试不工作。我在标题行中创建了两列。但是这些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;
}
是该工程的感谢。这解决了问题的崩溃。你能帮助我解决问题中提到的其他问题吗? –
我检查了您在Jsfiddle上提供的代码,我认为它是相同的。不过,我复制了你的代码并试图运行它。我仍然有同样的问题。即col-xs-2不是并排排列在col-xs-10下方,而且按钮也不是并排排列。虽然代码运行良好Jsfiddle –