Bootstrap網格不適用於<768px的小屏幕

Question

我正在使用引導程序來實現不同設備環境中的響應能力。 但是，當我在手機上進行測試時，這些列顯示不正確。 前兩列都可以，但第三列應從右側開始，但應向左推動。 在此處輸入圖片說明

html如下，

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!--required style sheets-->
    <link href="../../styles/bootstrap.min.css" type="text/css" rel="stylesheet">    
    <link href="../../styles/styles.css" type="text/css" rel="stylesheet">
    <title>Test</title>

</head>
<body>   

    <div class="container row">
        <div class="col-sm-3">        
        </div><!--/end left column-->
        <div class="col-sm-9">
            <div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12">

                        <div class="row">
                            <label class="col-xs-6 col-sm-3">Reg No:</label>
                            <div class="col-xs-6 col-sm-3 COES-value">21038</div>
                            <label class="col-xs-6 col-sm-3">Telephone no:</label>
                            <div class="col-xs-6 col-sm-3 COES-value">9758 9762</div>
                        </div>
                    </div>              
                </div>
            </div>
        </div>
   </div>

    <!--javascript libraries-->
    <script src="../../js/jquery-1.11.1.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</body>
</html>

CSS如下，

 /* Media queries - small #################################################      */

@media screen and (max-width: 768px) {      


       .COES-value{
           font-size: 10px;
           font-family: Arial;
           font-weight: bold;
       }   

}


 /* Media queries - large #################################################      */

@media screen and (min-width: 768px) {  

       .COES-value{
           font-size: 12px;
           font-family: Arial;
           font-weight: bold;
       }
}

Answer 1

您的問題不僅與iphone有關。 您為網格列使用labels而不是divs 。 labels margin-bottom: 5px; 由Bootstrap的。 此底邊距使第一列比xs網格上的第二列高。 對於一欄變高的情況，您應該應用“響應式”列重置，請參閱： http : //getbootstrap.com/css/#grid-sensitive-resets

使用四層網格時，您必然會遇到一些問題，在某些斷點處，您的列無法完全正確地清除，因為其中一列要比另一列高。 要解決此問題，請結合使用.clearfix和我們的響應實用程序類。

帶有標簽的嵌套行應如下所示：

<div class="row">
    <label class="col-xs-6 col-sm-3">Reg No:</label>
    <div class="col-xs-6 col-sm-3 COES-value">21038</div>
    <div class="clearfix visible-xs-block"></div>
    <label class="col-xs-6 col-sm-3">Telephone no:</label>
    <div class="col-xs-6 col-sm-3 COES-value">9758 9762</div>
</div>

另請注意，您不應在<div class="container row">同時使用container和row類，應將前面的內容拆分為<div class="container"></div class="row"> 。

同樣，似乎也不需要將帶有標簽的行包裝到： <div><div class="row"><div class="col-xs-12 col-sm-12"> 。

最后，您的代碼應如下所示：

<div class="container">
    <div class="row">
        <div class="col-sm-3"></div><!--/end left column-->
        <div class="col-sm-9">
                        <div class="row">
                            <label class="col-xs-6 col-sm-3">Reg No:</label>
                            <div class="col-xs-6 col-sm-3 COES-value">21038</div>
                            <div class="clearfix visible-xs-block"></div>
                            <label class="col-xs-6 col-sm-3">Telephone no:</label>
                            <div class="col-xs-6 col-sm-3 COES-value">9758 9762</div>
                        </div>
         </div>
   </div>
</div>

Answer 2

發生的情況是，在每個div中，網格中都有12列。 您連續有四個元素： label ， div ， label ， div如果屏幕尺寸非常小（ col-xs-6 ），則每個元素的列寬為6，因此您要在12列的空間中添加24列。 發生這種情況時，其他列會滑到下方。

您會期望一切正常工作，但是，如下圖所示，每個元素的內部邊距為列增加了額外的寬度，並阻止了元素按給定順序流動，從而為您提供了未對齊的網格。

元素錯位

要解決此問題，請嘗試按以下方式更改分組：

<div class="container row">
    <div class="col-sm-3"></div>
    <!--/end left column-->
    <div class="col-sm-9">
        <div class="col-xs-12 col-sm-6">
            <label class="col-xs-6 col-sm-6">Reg No:</label>
            <div class="col-xs-6 col-sm-6 COES-value">21038</div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <label class="col-xs-6 col-sm-6">Telephone no:</label>
            <div class="col-xs-6 col-sm-6 COES-value">9758 9762</div>
        </div>
    </div>
</div>

演示：小提琴

此外，將這些元素的邊距保持為0可能也很有效（但您可能希望縮小選擇器的范圍以僅影響您選擇的字段，否則它將影響任何頁面，任何位置的所有元素。

.col-sm-9 div, .col-sm-9 label{
    margin: 0px;
}

導致：

對齊元素

Bootstrap網格不適用於<768px的小屏幕

問題描述

2 個解決方案

解決方案1
1 已采納 2014-11-28 19:31:08

解決方案2
-1 2014-11-28 17:18:31

Bootstrap網格不適用於&lt;768px的小屏幕

問題描述

2 個解決方案

解決方案1 1 已采納 2014-11-28 19:31:08

解決方案2 -1 2014-11-28 17:18:31

Bootstrap網格不適用於<768px的小屏幕

解決方案1
1 已采納 2014-11-28 19:31:08

解決方案2
-1 2014-11-28 17:18:31