ブートストラップカラムが正しく動作しない

Question

ブートストラップの行と列が電話機やその他の小型デバイスで正しく表示されません。モバイルデバイス上の

スクリーンショット

。

タブレットとそれ以上のディスプレイでは、これは正しく機能します。

コード

<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 

私は一時的な修正をした - 私は、これらのdivに同じ高さを設定します。しかし、私はそれが常に良い解決策になるとは思わない。 より良い方法でこの問題を解決するためにどのように一時的な修正後

（以下、PICに追加揃える）

？

Answer 1

この問題は、フロートがクリアされていないことに起因します。ブートストラップのレイアウトでは非常に一般的です。ほとんどの要素がフローティングされているため、それに対処するヘルパークラスが含まれているからです。

<div class="clearfix"> 

特定のブレークポイントの新しい行に改行する項目の間に挿入します。したがって、あなたのケースでは、xsブレークポイントの最初の2つの "ww" divの後。これらのヘルパークラスに

<div class="clearfix visible-xs"> 

詳細情報は、ブートストラップマニュアルに記載されています：だけそれはあなたのXSは、我々は別のブートストラップヘルパークラスを追加ブレークポイントに影響していると

Clearfix、Visibility Classes

全ここの例：

i { 
 
    font-size: 30px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div> 
 
<div class="clearfix visible-xs"></div> 
 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div> 
 
<div class="clearfix visible-xs"></div> 
 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div>

Answer 2

ブートストラップの利点を得るには、12のグリッド列をそれぞれrow divに囲む必要があります。たとえば、

<div class="row"> 
    <div class="col-xs-5 col-sm-5"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-7">ww</div> 
</div> 

Answer 3

12列の行にそれぞれの列グループをラップする必要があります。クラスを追加するブレークポイントごとに、各行に最大12個の列を追加する必要があります。それぞれを連続してラップしないと、12列後に自動的に折り返されますが、同じ行に必要な列が常に12まで加算されるようにする必要があります。

ie。

<div class="row> 
    <div class="col-xs-7 col-sm-9">ww</div> 
    <div class="col-xs-5 col-sm-3"><i class="fa fa-mobile" aria-hidden="true"></i></div> 
</div> 
<div class="row> 
    <div class="col-xs-7 col-sm-9">ww</div> 
    <div class="col-xs-5 col-sm-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 
</div> 
<div class="row> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-9"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
</div> 

これは、レイアウトのビット少ない制御で動作します（ただし、すべてのブレークポイントを定義する必要があります - あなたのクラスでただ小さく、XSではありません）。

<div class="row> 
    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-mobile" aria-hidden="true"></i></div> 

    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 

    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
</div>