Twitter Bootstrap div無法超越768px

我開始學習twitter bootstrap並創建了非常簡單的佈局。Twitter Bootstrap div無法超越768px

當我改變瀏覽器的寬度時，行中的兩個div在瀏覽器的寬度低於768px時變得不可見。否則，divs在彼此之上。

我想顯示div沒有任何利潤率，最重要的是，可見！

這是plnkr。

來源

2013-09-27 lostpacket

您是否試過在2'divs'中放置任何內容以幫助您查看發生了什麼？ –

高興地幫助:) – Anobik

將此添加到頭部分。因爲改變瀏覽器的寬度超出數額則需要兩個

<!DOCTYPE html> 
<html> 

    <head> 
    <style type=text/css> 
    .container{ 
    width:100% !important; 
    } 
    .row div{ 
     width:100%; 
     margin:0px !important; 
     padding:0px !important; 
     } 
    </style> 
    <link data-require="[email protected]*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" /> 
    <link data-require="[email protected]*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" /> 
    <link data-require="[email protected]*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.css" /> 
    <script data-require="[email protected]*" data-semver="2.3.1" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="span 3 red" style="height : 100px"></div> 
     <div class="span 9 green" style="height : 100px"></div> 
     </div> 
    </div> 
    </body> 

</html>

風格現在div的不dissapear和無餘量也有當調整。

來源

2013-09-27 04:36:11 Anobik

您的div類在跨度和數字之間有空格。它應該更像：

<div class="container"> 
    <div class="row"> 
     <div class="span12 red" style="height : 100px"></div> 
     <div class="span12 green" style="height : 100px"></div> 
    </div> 
</div>

引導在12個柱網span12提出將填充容器，但將有一個保證金。

如果你希望它一路走在屏幕上，沒有保證金，不使用範圍或容器：

<div class="row"> 
    <div class="red" style="height : 100px"></div> 
    <div class="green" style="height : 100px"></div> 
</div>

典型的當一個元素沒有保證金它會爲一個容器內容：

<div class=" red" style="height : 100px"> 
    <div class="container"> 
     <div class="row"> 
     <div class="span12 green" style="height : 100px"></div> 
     </div> 
    </div> 
    </div> 

    <div class="green" style="height : 100px"> 
    <div class="container"> 
     <div class="row"> 
     <div class="span12 red" style="height : 100px"></div> 
     </div> 
    </div> 
    </div>

這裏是plnkr例如

此外，如果你是剛開始學習的引導，我會建議你學習v3.0而不是v2.3.1。不妨學習最新版本，因爲有些差異不會在版本之間進行轉換。

來源

2013-09-27 04:28:03 hcoat

Twitter Bootstrap div無法超越768px

回答

相關問題