ブートストラップ4は1行でimg-responsiveです

Question

私はブートストラップサイトに、img-responsive属性でサイズ調整された4つのイメージを持つ行を追加しようとしています。 「デスクトップで4列、タブレットで2列、モバイルで1列」 これは私がクラス「col-md-3 col-sm-6 col-xs-12」を使用しているためです。 "私はここでstackoverflowで見つけた。

私のコードは次のようになります。

<div class="container download" id="downloads"> 
    <h2>Downloads</h2> 
    <p class="lead">Some Text.....</p> 
    <div class="row"> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkT"> 
      <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img style="width: 20%; height: 20%" alt="AltText" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive"> 
     </a> 
     </div> 
    </div> 
    </div> 

私はいくつかのCOLクラスを試してみましたが、どれも機能しません。 私は、それぞれのcol divのクラスは、ページの幅全体を使用し、画像を見てみる1行:(

はあなたの助け

Answer 1

いただき、ありがとうございますに表示されていることを、放火犯、放火犯のショーでサイトを閲覧した場合、あなたのコードでは、行/列のピースは正常に表示されますが、インラインスタイルを使用して画像のサイズを変更すると、.responsive-imgクラスがオーバーライドされ、画像サイズが不十分になります。ブートストラップ4を使用している場合は、.img-fluidを使用する必要があります。.responsive-imgは、ブートストラップ3クラスです。ブートストラップ4を使用している場合は、.img-fluid

私はこのようになります作業例を持っています。

<div class="container download" id="downloads"> 
    <h2>Downloads</h2> 
    <p class="lead">Some Text.....</p> 
    <div class="row"> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkT"> 
      <img alt="AltText" src="https://placehold.it/300" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img alt="AltText" src="https://placehold.it/300" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img src="https://placehold.it/300" alt="AltText" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img alt="AltText" src="https://placehold.it/300" class="img-responsive"> 
     </a> 
     </div> 
    </div> 
</div> 

はこちらを参照してください：ブートストラップ4たとえばhttps://codepen.io/kball/pen/RLaXqR

参照：https://codepen.io/kball/pen/aLZozo

Answer 2

はあなたにすべての皆さんに感謝！ kballが私のエラーに私を導きます... 私はBootstrap 2.3 -.-に気づいたので、バージョン4にアップデートし、イメージに追加していたインラインスタイルを削除し、img-responsive img-fluidiveに変更しました。

そして今、それは魔法のように動作します:)再び、私は古いブートストラップバージョン