Bootstrap無法正常工作

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

來源

2015-11-05 Akash Kumar

嘗試CSS類「崩潰」添加到#main元素

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

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

來源

2015-11-05 07:42:29 vifito

是該工程的感謝。這解決了問題的崩潰。你能幫助我解決問題中提到的其他問題嗎？ –

我檢查了您在Jsfiddle上提供的代碼，我認爲它是相同的。不過，我複製了你的代碼並試圖運行它。我仍然有同樣的問題。即col-xs-2不是並排排列在col-xs-10下方，而且按鈕也不是並排排列。雖然代碼運行良好Jsfiddle –

我希望這將有助於

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

來源

2015-11-05 08:09:59 Raviteja

也請檢查：http：//jsfiddle.net/iamraviteja/zuhc2y32/1/ – Raviteja

Bootstrap無法正常工作

回答

相關問題