我在'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 –