带有文本和图像的 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 标签来指定网格

面板也有面板标题类，但我使用了面板标题类，如果需要，您可以使用面板标题