ブートストラップコンテナ内に画像の中心ブロックを作成する

Question

ブートストラップサイトのホームページに特定の方法で整理された画像のグループを持たせたいと思います。下の画像のように見えるように：

私は彼らが中心に残っているし、我々はモバイルに行くとき「のFreeshippingブロックは」750px以下のように、それだけで二つの水平ブロックを表示していないと、縮小します。

私はフロートクラスを追加するか、それらはすべてなどcol-4-sm、col-8-smブートストラップする必要があります私が持っているコード

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

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

でPlunkerを設定していますか？

PS - @queriesは、ブートストラップのサイトで使用されるべきか、彼らはほとんどすべてのレイアウトがcol-8-sm（ブートストラップクラス）をHTMLコードで処理する必要があるなど

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- *を書くことができます！