は、ブートストラップ：私は、次のブートストラップコードを持っているテキスト

Question

ラップ：タブレットとデスクトップ上で

<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を持っていますので、私が何を言っているのか分かります。フィドルを開いてブラウザのサイズを十分に小さくすると、画像に右のテキストが重なって表示されます。どうすればこれを防ぐことができますか？

Answer 1

幅が設定されているためです。 これを試してください。

JSFiddle

HTML

<div class="container-fluid"> 
     <div class="row"> 
     <div class="col-xs-2 col-md-2 col-sm-2"> 
      <div style="background-color: #ccc"> 
      <img class="test-image" 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> 

CSS

.test-image{ 
    width:100%; 
    height:auto; 
    min-width:25px; 
} 

Answer 2

それはthat.Or代替を試すことができますチャゲcol-xs-2.Youの幅のbecaueですこのようなソリューションは

<div class="container-fluid"> 
    <div class="row"> 
<div class="col-xs-12"> 
    <div style="width: 75px; background-color: #ccc;display:table-cell;"> 
     <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
    </div> 
    <div class=" " style="display:table-cell;vertical-align:middle;"> 
     Right content 
    </div> 
</div></div></div> 

0123私が知っている

それとも

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12" style="display:flex"> 
    <div style="width: 75px; background-color: #ccc;flex:1;"> 
     <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
    </div> 
    <div class=" " style="flex:1;vertical-align:middle;"> 
     Right content 
    </div></div></div></div> 

Answer 3

のようなCSSのflexboxesで最も簡単な方法は、要素への直接的な幅を適用することです。ブートストラップ3 SCSSまたはLESS（どちらを使用していても）を理論的に変更して特殊な列クラスを追加することもできますが、これが最も直接的な方法です。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div style="width:75px" class="col-xs-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>

Answer 4

これを試してみてください。あなたは、画像holder.The幅のためのCOL-XS-2を与えている

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-3 col-md-2 col-sm-2"> 
     <div style="width: 75px; background-color: #ccc"> 
     <img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" /> 
     </div> 
    </div> 
    <div class="col-xs-9 col-md-10 col-sm-10" style=""> 
     Right content 
    </div> 
    </div> 
</div>