ブートストラップカラムが機能しない

Question

私はこれで初めてで、ブートストラップ行に2枚の写真を並べて表示しようとしていますが、カラムが機能していないようです。私は間違って何をしていますか？助けをよろしくお願いします。

<div class="row" style="width: 100%"> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
    <img src="https://heavyeditorial.files.wordpress.com/2016/02/david-joseph.jpg?quality=65&strip=all&strip=all/200x200" class="img-thumbnail img-responsive" alt="David Joseph"> 
    <p class="caption">David Joseph was unarmed when he was fatally shot by Austin police. <em>Photo credit: APD</em></p> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
    <img src="http://assets.nydailynews.com/polopoly_fs/1.2523996.1454945162!/img/httpImage/image.jpg_gen/derivatives/article_400/observer9n-3-web.jpg" class="img-thumbnail img-responsive" alt="Antronie Scott"> 
    <p class="caption">San Antonio police fatally shot Antronie Scott, who was also unarmed. <em>Photo credit: SAPD</em></p></div> 
</div> 

Answer 1

<div class="col-xs-12"> 
<div class="col-xs-6"> 
    <img src="https://heavyeditorial.files.wordpress.com/2016/02/david-joseph.jpg?quality=65&strip=all&strip=all/200x200" class="img-thumbnail img-responsive" alt="David Joseph"> 
    <p class="caption">David Joseph was unarmed when he was fatally shot by Austin police. <em>Photo credit: APD</em></p> 
</div> 
<div class="col-xs-6"> 
    <img src="http://assets.nydailynews.com/polopoly_fs/1.2523996.1454945162!/img/httpImage/image.jpg_gen/derivatives/article_400/observer9n-3-web.jpg" class="img-thumbnail img-responsive" alt="Antronie Scott"> 
    <p c-lass="caption">San Antonio police fatally shot Antronie Scott, who was also unarmed. <em>Photo credit: SAPD</em></p></div> 
</div> 
</div> 

あなたは12-COLグリッドに満足できない場合は、ここで他の値にそれをカスタマイズすることができます。http://getbootstrap.com/customize/

スクロール「グリッドシステム」まで、ニーズに変更し、スクロールダウン、独自のブートストラップをコンパイルしてダウンロードする）

Answer 2

すべてのバリエーションに同じCSS列クラスを指定する必要があります。

あなたの試行にcol-xs-12が表示されている場合は、col-xs-6に変更してください。

基本的に、各行に合計12個の列があり、それぞれの列が6個の列幅で均等に分割されるようにしたいとします。あなたがイメージタグ内にクラスを追加する必要があるイメージの「IMG応答性」:)のために

Answer 3

Answer 4

これは、あなたがやろうとしている何のために働くかもしれない：

<div class="container"> 
    <section class="row"> 
     <div class="col-md-6"> 
      <img src="https://heavyeditorial.files.wordpress.com/2016/02/david-joseph.jpg?quality=65&strip=all&strip=all/200x200" class="img-thumbnail img-responsive" alt="David Joseph"> 
      <p class="caption">David Joseph was unarmed when he was fatally shot by Austin police. <em>Photo credit: APD</em></p> 
     </div> 
     <div class="col-md-6"> 
      <img src="http://assets.nydailynews.com/polopoly_fs/1.2523996.1454945162!/img/httpImage/image.jpg_gen/derivatives/article_400/observer9n-3-web.jpg" class="img-thumbnail img-responsive" alt="Antronie Scott"> 
      <p class="caption">San Antonio police fatally shot Antronie Scott, who was also unarmed. <em>Photo credit: SAPD</em></p></div> 
     </div> 
    </section> 
</div>