ブートストラップのオーバーフローが正しく調整されていません

Question

私は小さな画面（つまり電話機）のどこに画像を配置したいのですか？大きな画面では画像をテキストの右側に配置したいのです。

私はオフセットを使用して、大きな画面で画像を右に引っ張っています。しかし、それは大画面で正しく整列していません（小画面は私が期待したとおりです）。左のテキストは、右のイメージの後に始まります。 ...

Here is a screenshot（不要なギャップが黄色でマーク）

とコード...私は前に、ブートストラップのオフセット機能を使用していないと私は私が間違ってやっている、非常にわからないんだけど

<div class="row"> 

    <div class="col-md-4 col-xs-12 col-md-offset-8"> 
     <img src="<?php echo $p['main_img_landing']; ?> " class="img-responsive" alt=""> 
    </div> 

    <div class="col-md-8 col-xs-12"> 
     <?php echo nl2br($p['desc_landing']); ?>  
    </div> 

</div> 

Answer 1

Heyho、

あなたはCOL-MD-オフセット-8は、このように、このコラムで行全体を埋め、余裕を持って右に画像を推進していると何をしていますか。

数学：4 + 8 = 12

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-sm-4 col-xs-12 col-sm-push-8"> 
 
    Your Picture 
 
</div> 
 
<div class="col-sm-8 col-xs-12 col-sm-pull-4"> 
 
    Your text 
 
</div>

あなたはプッシュとプルを経由してこの問題を解決することができます。したがって、中間のスクリーンでは、テキストは、左側に「最初」、比率8/4で表示されます。小さな画面では、画像が上に、テキストが下に、通常の順序になります。希望を助ける:)

ああ、テストの理由から、私はcol-smを置く。そうしないと、プレビューで結果を参照してください傾ける:)完全に働いた

挨拶