堆叠时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网格系统重叠

回答

相关问题