Bootstrap，無法將我的圖像和文本並排放置在3組中

Question

Im我無法直接將圖像放在每組文本的左側，文本會在圖像下方顯示。如果使用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>