부트 스트랩을 사용하여 검색 상자와 이미지 (2x3) 아래에 2x3 행의 div를 만드는 방법

Question

페이지 중앙에 검색 상자가있는 페이지를 만들어야합니다. 부트 스트랩 프레임 워크를 사용하여 2 행 3 열에 약 6 개의 축소판 이미지를 표시해야합니다.

참고 : 전체 페이지의 콘텐츠가 검색 컨트롤과 thumbnails.For 예와 페이지

Answer 1

사용 오프셋 클래스의 중심에 존재해야한다는 :

<div class="offsetX"> 
//Search control. 
</div> 

X는 숫자 1 ~ 12

될 수 있습니다

Answer 2

이와 비슷한? 아래 코드는 그냥 CSS에서 여분의 스타일을 추가 부트 스트랩 3.0

<div class="container text-center"> 
    <div class="col-lg-12"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search term"> 
      <span class="input-group-btn"> 
       <button class="btn btn-default" type="button">Go!</button> 
      </span> 
     </div> 
    </div> 
    <div class="col-lg-12 text-center"> 
     <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div> 
     <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div> 
     <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div> 
    </div> 
    <div class="col-lg-12 text-center"> 
     <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div> 
     <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div> 
     <div class="col-lg-4 col-md-4 col-sm-4"><img src="http://www.bio.umass.edu/micro/nusslein/images/people/no_photo.jpg" /></div> 
    </div> 
</div> 

Answer 3

<div class=" container col-md-12 col-xs-12 abc"> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Enter Keyword"> 
     <span class="input-group-btn"> 
      <button class="btn btn-info" type="button">Search</button> 
     </span> 
    </div> 
</div> 
    <div class="container col-md-12 abc"> 
       <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4"> 
       <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4"> 
       <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4"> 
    </div> 
    <div class="container col-md-12 abc"> 
       <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4"> 
       <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4"> 
       <img src = "http://dummyimage.com/100x100/000/fff.jpg&text=Dummy+Image" class="image col-md-4 col-xs-4"> 
    </div> 

함께 :

.abc{ 
    padding : 20px; 
} 

을 그리고 이것은 가장 간단한 방법과 할 수있는 가장 완벽한 방법입니다 이. 괜찮아. 행운을 빕니다.