Question

我正在尝试使用不同背景颜色的文本和图像（图像更深）和文本的另一种颜色来实现3个面板。

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

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

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

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

2 个答案: