引導類的奇怪行爲

我是引導程序的新手。我只是試驗下面的代碼。引導類的奇怪行爲

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container-fluid"> 
    <h1>Hello World!</h1> 
    <p>Resize the browser window to see the effect.</p> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-8" style="background-color:red;">col1</div> 
    <div class="col-md-6 col-sm-4" style="background-color:green;">col2</div> 
    </div> 
</div> 

</body> 
</html>

奇怪的是，經過一定的寬度後，col1消失了。當它很小時，我希望整個12列。我有沒有錯誤的代碼？

來源

2015-07-20 Hacker

試着改變你的行類，容器類。這可以做到這一點，因爲基本上它似乎不應該有，第二排。 – Dan

@丹 - 它沒有工作！ – Hacker

只需在col2中添加「col-xs-12」，否則它會與col1重疊。

來源

2015-07-21 01:40:47 Nick

如果沒有列出，是不是暗示？ – Dan

它爲什麼重疊？因爲兩者都被定義爲2種不同的觀點。 – Hacker

網格類適用於屏幕寬度大於或等於斷點尺寸的設備，並覆蓋面向較小設備的網格類。

屏幕尺寸破發點

COL-XS-*額外的小屏幕（< 768px）

COL-SM-*適用於小型設備（≥768px）

山坳-md- *爲介質屏幕（≥992px）

COL-LG- *爲更大的屏幕（≥1200px）

示例代碼

<div class="row"> <div class="col-xs-12 col-md-6 col-sm-8" style="background-color:red;">col1</div> <div class="col-xs-12 col-md-6 col-sm-4" style="background-color:green;">col2</div> </div>

參考

http://getbootstrap.com/css/#grid

來源

2015-07-21 14:17:16 prashanth

引導類的奇怪行爲

回答

相關問題