ラップ:タブレットとデスクトップ上では、ブートストラップ:私は、次のブートストラップコードを持っているテキスト
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
を、このコードはよさそうです。しかし、より小さいデバイスの場合はxs
、適切なコンテンツがイメージに流れ込みます。テキストを右に折り返してイメージに衝突させないようにしようとしています。
私はfiddle hereを持っていますので、私が何を言っているのか分かります。フィドルを開いてブラウザのサイズを十分に小さくすると、画像に右のテキストが重なって表示されます。どうすればこれを防ぐことができますか?
は、小さな画面イメージ上の25%less.Soは個人的に私はイメージコンテナと説明コンテナを与えるだろう – XYZ
コンテナをオーバーフローするそうです'.col-xs-12'のクラスで、両方が全体の行を占めるようにします。 – Jhecht
@Jhecht - そうすることで、画像の下にテキストが置かれます。私が望むのは、イメージが一定の75ピクセルに留まることですが、正しいコンテンツはセル内で小さくなり、ラップされます。 – Icemanind