Question

我正在使用bootstrap来实现不同设备环境中的响应能力。但是当我在手机上测试时，列没有正确显示。前两列很好，但第三列应从右侧开始，但它被推到左侧。 enter image description here

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由Bootstrap获得margin-bottom: 5px;。此底边距使第一列高于xs网格上的第二列。对于一列变高的情况，您应该应用响应列重置，请参阅：http://getbootstrap.com/css/#grid-responsive-resets

随着四层网格可用，您必然会遇到问题在某些断点处，你的专栏不是很清楚一个比另一个高。要解决这个问题，请使用a的组合 .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>

另请注意，您不应在container中同时使用row和<div class="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 - 如果屏幕尺寸过小，则每个元素的列宽为6（{{1}所以你要在12列空间中添加24列。发生这种情况时，会在下方添加其他列。

您可能希望一切正常工作，但正如您在下图中看到的那样，每个元素的内部边距会为列添加额外的宽度，并阻止元素以给定的顺序流动，从而为您提供错位网格。

misalignment of elements

要解决此问题，请尝试更改分组，如下所示：

col-xs-6

<强> DEMO: Fiddle

此外，将这些元素的边距保持为0可能也有效（但您可能希望缩小选择范围以仅影响您选择的字段，否则它将影响任何页面中的所有元素，任何位置。

<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>

导致：

aligned elements

Bootstrap网格不适用于小屏幕宽度＆lt; 768px

2 个答案: