ブートストラップイメージは携帯端末でのみ枠線に伸びます

Question

BS4では、コンテナを他のすべての要素（div、h1など）に合わせて維持しながら、モバイルで画面の境界線に画像を引き伸ばすにはどうすればよいですか？

私の問題は、メディアクエリでコンテナの幅を簡単に変更できるということですが、すべての要素に影響します。また、画像はデスクトップ上の境界に伸びてはいけません。なぜなら、私は一般的なコンテナ流体を使うことができないのです。

また、私はそうのような負のマージンを使用してみました：

@media (max-width: 575px) { 
 
    .mobile-stretch { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-12"> 
 
     <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" /> 
 
    </div> 
 
    </div> 
 
</div>

なぜ

わからないが、右側の境界線を維持しながら、それだけで、左の境界に広がっています。私は何が欠けていますか？

Answer 1

あなたはコンテナの代わりにコンテナ流体クラスを追加し、コンテナクラスの他のものは中央に配置しますか？

.no-gutters { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
    > .col, 
 
    > [class*="col-"] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row no-gutters"> 
 
    <div class="col-12"> 
 
     <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-12"> 
 
     <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" /> 
 
    </div> 
 
    </div> 
 
</div>