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

Question

我正在嘗試實現 3 個帶有文本和圖像的面板，圖像的背景顏色不同（較暗），文本的背景顏色不同。

這是我當前的代碼，適用於網站的桌面版本，但在移動設備上中斷。 目前布局是IMAGE->IMAGE->IMAGE。 Text->Text->Text 應該是 IMAGE -> Text。 圖像 -> 文本。 圖像 -> 文本：

當前代碼

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

在使用面板的引導程序中，您必須使用面板代碼，您可以在此處看到引導程序面板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 標簽來指定網格

面板也有面板標題類，但我使用了面板標題類，如果需要，您可以使用面板標題