Bootstrap 3面板文本和圖像（具有不同背景的圖像）

Question

我想實現3個面板文本和圖像與不同的背景顏色的圖像（更黑）和另一種顏色的文字。

這是我當前的代碼，它適用於網站的桌面版本，但在手機上打破。 目前的佈局是圖像 - >圖像 - >圖像。文本 - >文本 - >文本，它應該是圖像 - >文本。圖像 - >文本。圖片 - >正文：

current code

Answer 1

所以按照我的意見，你需要包括你的圖片和文字成一列，那麼所有三列到行。事情是這樣的：

<div class="row"> 
    <div class="col-md-4"> 
    <div><img src="#"></div> 
    <div>Some text</div> 
    </div> 
    <div class="col-md-4"> 
    <div><img src="#"></div> 
    <div>Some text</div> 
    </div> 
    <div class="col-md-4"> 
    <div><img src="#"></div> 
    <div>Some text</div> 
    </div> 
</div> 

你應該檢查指導引導網站上使用他們的網格佈局:)

Answer 2

在bootstarp使用的面板必須使用面板代碼 你可以看到這裏的引導板Bootstrap Panels

<div class="row"> 
    <div class="container"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel heading without title</div> 
      <div class="panel-body"> 
       <img src="#"> 
       <p>text Here</p> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel heading without title</div> 
      <div class="panel-body"> 
       <img src="#"> 
       <p>text Here</p> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel heading without title</div> 
      <div class="panel-body"> 
       <img src="#"> 
       <p>text Here</p> 
      </div> 
     </div> 
    </div> 
</div> 

自動將所有三列放在一排，如果你想使用不同的柱網，您必須在另一個div標籤指定網格

也面板有面板標題類，但我用面板標題類，你可以使用面板標題，如果你想