イメージ全体がコンテナ幅のブートストラップに収まるように伸ばします

Question

私は1300px幅のイメージを持っています。ブートストラップを使用しています。このイメージを1300pxに設定されたコンテナの全幅に塗りたいとします。私は行を作成し、それに完全な12の列を与えてから、イメージのクラスをイメージに追加します。この設定で私は以下の出力を得る。

私は私のイメージは、私のイメージが私のコンテンツである場合に沿ってすべての道を伸ばしたい、ここに私のコードです。

<div class="row"> 
    <div class="container"> 
     <div class="col-md-12"> 
     <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/> 
     </div> 
    </div> 
    </div> 

画像は幅100％に設定されているため、容器が満たされていない理由はわかりません。

Answer 1

チェック、それはあなた

<div class="container-fluid no-padding"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" /> 
    </div> 
    </div> 
</div> 

CSS

.no-padding { 
    padding-left: 0; 
    padding-right: 0; 
} 

CSSクラス "無パディングは、" デフォルトのブートストラップ・コンテナのパディングを上書きします助けている場合。

全例： https://jsfiddle.net/3hk9b1a2/

Answer 2

containerクラスが15ピクセルは&右パディングを残しているので、あなたはrowクラスが持っているので、以下、使用をこのパディングを削除したい場合-15pxは&右マージンを残しました。

<div class="container"> 
    <div class="row"> 
    <img class='img-responsive' src="#" alt="" /> 
    </div> 
</div> 

Codepen：http://codepen.io/m-dehghani/pen/jqeKgv