ブートストラップカラムが画像で拡大される

Question

を含むrowがあります。最後の列にはイメージがあり、携帯電話でウェブサイトをレンダリングすると、最後の列がイメージによって拡大され、新しい行に置き換えられます。

ヒスイ：

div.row#contact 
    div.col-md-3 
    div.col-md-2 
    div.col-md-1 
    div.col-md-1 
    div.col-md-1 
    div.col-md-1  
    div.col-md-3 
    img(src = "./images/wko_logo.svg", alt = "wko logo") 

SCSS：

img { 
     max-width: 100%; 
     height: auto; 
    } 

Answer 1

ブートストラップのGRI dシステムは、https://getbootstrap.com/css/#grid-optionsで定義されているように、容器幅が768px以下になるまでsm列を使用します。それがその幅より下になると、それぞれ.col-sm-* divに100％の幅が与えられます。 html要素にxsコンテナの幅に対する動作を与え、問題は解決されます。

実例はhttps://jsfiddle.net/fqxg3L9p/です。