ブートストラップ、イメージとテキストを3セットで並べて配置するときに問題があります

Question

イメージを各テキストセットの左に直接配置すると問題が発生し、イメージはイメージの下に表示されたままになります。私はcol - MD - 4を使用しているので、各テキストと画像の3つのセットがあります。

.container { 
 
    float: left; 
 
    display: block; 
 
}

<div class="container"> 
 
    <!--Row with three equal columns--> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content"> 
 

 
     <p> 
 
      <img src="images/squareicon.png"> 
 
      <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content bg-alt"> 
 
     <img src="images/pointericon.png"> 
 
     <h3>Central Location</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content"> 
 
     <img src="images/foodicon.png"> 
 
     <h3>Catering to Taste</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたはブートストラップを使用しているので、あなたは、画像の上に、クラスpull-leftを追加したり、このような何かにHTMLを変更することができます。

<img src="images/pointericon.png"> 
<h3>Central Location</h3> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 

<div class="col-xs-4"><img src="images/pointericon.png"></div> 
<div class="col-xs-8"> 
<h3>Central Location</h3> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> 

ない完全な例のようなものに

が、見出し要素は全幅ブロック要素であるため、テキストは以下の予定です。ブロック要素は浮動小数点型以外は何も押し上げません。私の考えでは、HTMLを変更する方が、より大きな画面サイズで携帯端末や横に並べて配置することができます。また、必要に応じてimg-responsiveクラスを使用することもできます。単に画像をフローティングすると、オプションが少し制限されます。

これは機能し、スペースを含んでいます。 100％ブートストラップは画像をフローティングしません。

<div class="container"> 
    <!--Row with three equal columns--> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="demo-content row"> 
     <div class="col-xs-4"> 
      <img src="//placehold.it/120"> 
     </div> 
     <div class="col-xs-8"> 
      <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
     </div> 
     </div> 
    </div> 
    <div class="col-md-4 row"> 
     <div class="demo-content bg-alt"> 
     <div class="col-xs-4"> 
      <img src="//placehold.it/120"> 
     </div> 
     <div class="col-xs-8"> 
      <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
     </div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="demo-content row"> 
     <div class="col-xs-4"> 
      <img src="//placehold.it/120"> 
     </div> 
     <div class="col-xs-8"> 
      <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
     </div> 
     </div> 
    </div> 
    </div> 
</div>