Question

大家好我正在使用Bootstrap并尝试构建3个灰色颜色框，顶部是背景图像，下方是文本和按钮。但是我无法做到这一点我需要你的帮助才能使它成功This is what I am trying to achieve

<div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                   <div class="pull-left">
            <img class="img-responsive" src="images/img1.jpeg">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">Text 1</h3>
                            <p>CHeck out Button</p>
                        </div>
                    </div>
                </div>

Answer 1

您可以使用Bootstrap Custom Content作为基础，而不是您当前使用的Media对象。然后只需应用您想要的样式。

*请注意，这取决于特定的图像尺寸，因此需要根据您最终使用的实际图像尺寸调整这些规则。

请参阅工作示例代码段。

＆＃13;

.thumbnail.checkout-thumbnail {
  background: #eee;
  border: none;
  max-width: 370px;
  margin: 5px auto;
}
.caption.checkout-caption {
  margin-top: 20px;
}
.btn.btn-checkout {
  border-radius: 0;
  border: none;
  background: none;
  margin-top: 30px;
}
.btn.btn-orange {
  border: 2px solid orange;
}
.btn.btn-teal {
  border: 2px solid teal;
}
.btn.btn-red {
  border: 2px solid red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail checkout-thumbnail">
        <img src="http://placehold.it/350x200" alt="...">
        <div class="caption checkout-caption">
          <h3>House and Land Packages</h3>

          <p><a href="#" class="btn btn-default btn-checkout btn-orange" role="button">Check out Button</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail checkout-thumbnail">
        <img src="http://placehold.it/350x200" alt="...">
        <div class="caption checkout-caption">
          <h3>House and Land Packages</h3>

          <p><a href="#" class="btn btn-default btn-checkout btn-teal" role="button">Check out Button</a> 
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail checkout-thumbnail">
        <img src="http://placehold.it/350x200" alt="...">
        <div class="caption checkout-caption">
          <h3>House and Land Packages</h3>

          <p><a href="#" class="btn btn-default btn-checkout btn-red" role="button">Check out Button</a> 
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

创建具有背景颜色和图像的3响应框

1 个答案: