ブートストラップを使用して、さまざまなデバイス環境で応答性を実現しています。
しかし、これを携帯電話でテストすると、列が正しく表示されません。最初の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>
また、
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>