html - ブートストラップグリッドが小さい画面幅<768pxで機能しない

原文 html css twitter-bootstrap-3

ブートストラップを使用して、さまざまなデバイス環境で応答性を実現しています。
しかし、これを携帯電話でテストすると、列が正しく表示されません。最初の2列は問題ありませんが、3列目は右側から始まるはずですが、左に押されています。


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;
       }
}
答え
あなたの問題はiphoneだけに関連していません。
グリッド列には、labelsの代わりにdivsを使用します。 labelsはBootstrapによってmargin-bottom: 5px;を取得します。この下マージンにより、1列目がxsグリッドの2列目よりも高くなります。 1つの列が高くなる状況については、レスポンシブ列のリセットを適用する必要があります。以下を参照してください:http://getbootstrap.com/css/#grid-responsive-resets


利用可能な4層のグリッドを使用すると、問題が発生します。
ここでは、特定のブレークポイントで、列が正しくクリアされません。
一方は他方よりも背が高い。これを修正するには、
.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>


また、containerrowクラスと<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>
関連記事

javascript - HTMLに解析されたJSONデータの<script>タグのエスケープ/削除

javascript - ドロップダウンに表示される複数のcssファイルからCSSクラスのリストを取得します

javascript - <a>タグが混在するテキストノードをjQueryでラップする方法は?

javascript - JavaScriptを使用して範囲を強調表示できない

html - iOSでレンジスライダーズームを解決する方法

html - Li-IE 10およびChromeのスパン幅の問題

javascript - JavaScriptでHTMLチェックボックスをループ

javascript - JavaScript画像のsrc属性が誤った値を返す

html - ビューポートの高さメタタグ

javascript - 2画像を同時に表示