부트 스트랩 3에서 5 div div를 동일하게 만듭니다.

Question

bootstrep에서 열 너비가 5 div 인 행을 만들려고합니다.

그래서 코드가 될

은 -

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-4 col-lg-offset-4"> 
 
     <!-- Main Content --> 
 
     <!-- Weather --> 
 
     <div class="element"> 
 
     <div class="header_text"> 
 
      Weather 
 
     </div> 
 
     <div class="element_body description_text"> 
 
      <div class="row"> 
 
      <div class="col-md-2">sss</div> 
 
      <div class="col-md-2">sss</div> 
 
      <div class="col-md-2">sss</div> 
 
      <div class="col-md-2">sss</div> 
 
      <div class="col-md-2">sss</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- End Weather --> 
 
     <!-- End Main Content --> 
 
    </div> 
 
    </div> 
 
</div>

그래서 나는

같은 - A 출력을 얻을하지만 페이지의 너비를 변경하면 문제가 행해진 다. 그것과 같은 세로로 남게됩니다 .-

그러나 나는 언제든지 방향을 바꾸고 싶지 않습니다. 그래서, 페이지의 너비가 변경되면 매번 수평이되도록하고 싶습니다.

아무도 도와 줄 수 있습니까?

도움을 주셔서 미리 감사드립니다.

Answer 1

JSFIddle.

문제 :

이 div 즉 display: block;의 기본 동작을 당신은 sm 및 xs 크기를 제공하지 않습니다.

솔루션 :이

그래서 xs에 md을 변경합니다.

<!-- Content --> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-4 col-lg-offset-4"> 
       <!-- Main Content --> 
        <!-- Weather --> 
        <div class="element"> 
         <div class="header_text"> 
          Weather 
         </div> 
         <div class="element_body description_text"> 
          <div class="row"> 
           <div class="col-xs-2">sss</div> 
           <div class="col-xs-2">sss</div> 
           <div class="col-xs-2">sss</div> 
           <div class="col-xs-2">sss</div> 
           <div class="col-xs-2">sss</div> 
          </div> 
         </div> 
        </div> 
        <!-- End Weather --> 
       <!-- End Main Content --> 
      </div> 
     </div> 
    </div> 
<!-- End Content -->