堆疊時Bootstrap網格系統重疊

我正在嘗試使用Bootstrap網格系統創建基本4平方。當屏幕大小不一時，我希望它是一個四方形，填滿頁面，當屏幕很小時，四個方塊會堆疊起來。堆疊時Bootstrap網格系統重疊

我認爲我得到了它的工作，但是當屏幕尺寸變小，第2和第3箱重疊。任何建議我做錯了什麼？

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My Website</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 

    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/respond.min.js"></script> 
    <style type="text/css"> 
     html, body, .container { 
      height: 100%; 
     } 

     html { 
      min-height: 100%; 
     } 
     .divGeneral{ 
      text-align: center; 
      border: 2px solid black; 
     } 
     .row{ 
      height: 50% 
     } 

     #topL{ 
      min-height: 100%; 
     } 
     #topR{ 
      min-height: 100%; 
     } 
     #botL{ 
      min-height: 100%; 
     } 
     #botR{ 
      min-height: 100%; 
     } 

    </style> 

</head> 

<body> 

    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6 divGeneral" id="topL">trend charts 

      </div> 
      <div class="col-md-6 divGeneral" id="topR">detail 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6 divGeneral" id="botL">refire 
      </div> 
      <div class="col-md-6 divGeneral" id="botR">ncr 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2014-10-02 chungtinhlakho

最小高度導致重疊。但我不確定我是否明白你想要什麼;無論如何，還不夠好。 – brian 2014-10-02 06:23:44

可以肯定的是，在'普通'屏幕和小屏幕中的1行4列時，您需要2行2列，對嗎？ – Laurent 2014-10-02 06:30:29

刪除下面的最小高度和高度：

html { 
     min-height: 100%; 
    } 
    .row{ 
     height: 50% 
    } 

    #topL{ 
     min-height: 100%; 
    } 
    #topR{ 
     min-height: 100%; 
    } 
    #botL{ 
     min-height: 100%; 
    } 
    #botR{ 
     min-height: 100%; 
    }

並嘗試類似的東西：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 divGeneral" id="topL">trend charts 
     </div> 
     <div class="col-md-6 divGeneral" id="topR">detail 
     </div> 
     <div class="col-md-6 divGeneral" id="botL">refire 
     </div> 
     <div class="col-md-6 divGeneral" id="botR">ncr 
     </div> 
    </div> 
</div>

編輯：看評論

來源

2014-10-02 06:24:59 Laurent

有可能兩個像素邊框也會導致問題。 BS3網格非常精確。 – brian 2014-10-02 06:26:35

我認爲問題來自強制高度：行的50％。 – Laurent 2014-10-02 06:28:46

爲什麼「col-xs-12」會自動調整到100％如果媒體問題已經達到 – 2014-10-02 06:36:20

試試這個代碼

<div class="container"> 
     <div class="row"> 
      <div class="col-xs-6 divGeneral" id="topL">trend charts 

      </div> 
      <div class="col-xs-6 divGeneral" id="topR">detail 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6 divGeneral" id="botL">refire 
      </div> 
      <div class="col-xs-6 divGeneral" id="botR">ncr 
      </div> 
     </div> 
    </div>

來源

2014-10-02 06:28:25 Bir

無論屏幕如何，都不會導致2x2？ BS3首先是移動的。 – Laurent 2014-10-02 06:31:24

堆疊時Bootstrap網格系統重疊

回答

相關問題