带有文本和图像的 Bootstrap 3 面板（图像具有不同的背景）答案

【问题标题】：Bootstrap 3 panels with text and images (with different background for the images)带有文本和图像的 Bootstrap 3 面板（图像具有不同的背景）
【发布时间】：2016-02-15 03:49:08
【问题描述】：

我正在尝试实现 3 个面板，其中包含文本和图像，图像的背景颜色不同（较暗），文本的背景颜色另一种颜色。

这是我当前的代码，适用于网站的桌面版本，但在移动设备上会中断。目前布局是 IMAGE->IMAGE->IMAGE。文本->文本->文本，它应该是图像->文本。图片 -> 文字。图片 -> 文字：

current code

【问题讨论】：

嗨莎拉。到目前为止看起来不错！你究竟希望它是什么样子？不知道你所说的“休息”是什么意思。谢谢:)
嘿！目前布局是 IMAGE->IMAGE->IMAGE。文本->文本->文本，它应该是图像->文本。图片 -> 文字。图片 -> 文字
嗯，好的。您的问题是所有图像都在一行中，然后所有文本都在另一行中。我会弹出一些示例代码作为答案让您入门。
另外，值得检查此链接以帮助解决未来的问题。不过很容易犯错，祝你好运！ :) stackoverflow.com/help/how-to-ask

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在 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 标签来指定网格

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

【讨论】：

【解决方案2】：

因此，根据我的评论，您需要将图像和文本都包含在一个列中，然后将所有三列包含在一行中。像这样的：

<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>

您应该查看引导站点以获取有关使用其网格布局的指导:)

【讨论】：