사진을 표시하는 부트 스트랩 열

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>