写真を表示するブートストラップ列

Question

私は初心者用の基本コードを書いています。私はいくつかの写真を掲示しており、表示するために列を使いたがっています。

私のページを見ると、すべての写真が縦一列になっています。ページの3列目に表示するにはどうすればよいですか。私は何が間違っているのか分かりません。

これは、HTML/CSSで私が書いた：

HTML：

<div class="supporting-4"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
     <div class="thumbnail"> 
      <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/My-Love.jpg" style="width: 256px; height: 256px;"> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="thumbnail"> 
      <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Me-Hayley.jpg" style="width: 256px; height: 256px;"> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="thumbnail"> 
      <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Me-Mom-Dad.jpg" style="width: 256px; height: 256px;"> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="thumbnail"> 
     <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Chris-Melissa.jpg" style="width: 256px; height: 256px;"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="thumbnail"> 
     <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Best-Friends.jpg" style="width: 256px; height: 256px;"> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="thumbnail"> 
     <img src="C:\Users\Kevin\Documents\Kevin's Website\Images/Sugar.jpg" style="width: 256px; height: 256px;"> 
     </div> 
    </div> 
    </div> 
    </div> 
</div> 

をCSS：

.supporting-4 .thumbnail { 
    display: inline-block; 
} 

Answer 1

プロジェクトにbootstrap.cssを追加していますか？ - あなたは、このような何かbootstrap.cssをリンクする必要があります。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 

をプラス、あなたはとてもあなたがイメージが応答することができimgでimg-responsiveを使用することができます。

注：が助けをimg

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="thumbnail"> 
 
      <img class="img-responsive" src="//placehold.it/800" > 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="thumbnail"> 
 
      <img class="img-responsive" src="//placehold.it/800" > 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="thumbnail"> 
 
      <img class="img-responsive" src="//placehold.it/800" > 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div class="thumbnail"> 
 
     <img class="img-responsive" src="//placehold.it/800"> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="thumbnail"> 
 
     <img class="img-responsive" src="//placehold.it/800" > 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="thumbnail"> 
 
     <img class="img-responsive" src="//placehold.it/800" > 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div>