在Bootstrap容器中创建居中的图像块

Question

我希望在自举网站的主页上以一定的方式排列一组居中的图像。如下图所示：

我希望他们保持居中，然后在我们进入移动时收缩，使用＆＃34; freeshipping block＆＃34;没有显示，只有750px以下的两个水平块。

我已经使用我的代码设置了一个Plunker

https://plnkr.co/edit/l6rbmEZQbqGZYifBmF5k?p=preview

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 customer-greeting">
  <p class="intro_text">My opening blurb of text</p>
  <div class="offerscontainer">
    <div class="offeroftheday">
      <a href="product_info.php?products_id=221">
        <img class="img-responsive" src="http://i.imgur.com/TQ6gwoO.jpg">
      </a>
    </div>
    <div class="freeshipping">
      <img class="img-responsive" src="http://i.imgur.com/Xqw75nl.jpg">
    </div>
    <div class="24hrdelivery">
      <a href="index.php?cPath=53">
        <img class="img-responsive" src="http://i.imgur.com/F3JTlas.jpg">
      </a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我应该添加浮点类，还是应该都是bootstrap col-8-sm，col-4-sm等？

PS - 应该在Bootstrap站点中使用@queries，还是应该在HTML代码中使用col-8-sm（引导类）等处理所有布局

Answer 1

你可以这样做..

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
      <br>
      <img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
      <br>
    </div>
    <div class="col-sm-4">
      <img class="img-responsive width-100" src="http://i.imgur.com/Xqw75nl.jpg">
    </div>
  </div>
</div>

CSS

.width-100 { width: 100%; }

您可以根据您的要求编写col-md- *或col-sm- *！