부트 스트랩 행/열을 사용하는 방법을 이해하려고합니까?

Question

큰 화면에서 4 열, 중간 크기의 화면 2 개와 작은 화면 1 개를 만들려고합니다. 크고 작은 작은 작업이지만, 단순히 매체가 아니라고 가정합니다. 왜냐하면 col-6은 4 번 열이 12 개의 열 대신에 24가되기 때문입니다. 여기 내 코드는 다음과 같습니다.

<div class="row"> 
      <div class="col-xs-12 col-med-6 col-lg-3"> 
       <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png"> 
      </div> 
      <div class="col-xs-12 col-med-6 col-lg-3"> 
       <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png"> 
      </div> 
      <div class="col-xs-12 col-med-6 col-lg-3"> 
       <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png"> 
      </div> 
      <div class="col-xs-12 col-med-6 col-lg-3"> 
       <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png"> 
      </div> 
</div> 

중간 열에는 2 개의 열만 있도록이 작업을 수행 할 수 있습니까?

Answer 1

중간 크기의 화면에는 잘못된 클래스를 사용했습니다. 그것은 col-md-6 대신 col-med-6

되어야하며, 만약 col-md-6 4 열을 선언하면, 열을 재 배열 처음 두 (12 총)이 첫 번째 행을 차지하며 그 다음 두 번째로 배치한다하도록 열.

Answer 2

당신의 접근 방식은 정확 합니다만 중간 열의 클래스 이름 만 틀리면 col-md-6이어야합니다. (Bootstrap docs)

Answer 3

col-md-6 아니요, col-med-6입니다. 이 클래스 이름을 고치면 작동 할 것입니다.

Answer 4

는 여기 클래스의 https://jsfiddle.net/8er0e3Lh/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"> 
 
     <img src="http://via.placeholder.com/350x15"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"> 
 
     <img src="http://via.placeholder.com/350x15"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"> 
 
     <img src="http://via.placeholder.com/350x15"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"> 
 
     <img src="http://via.placeholder.com/350x15"> 
 
    </div> 
 
    </div> 
 
</div>

주문은 더 큰 화면으로 화면 하단에서해야하는 솔루션과 함께 할 것입니다.

희망이 도움이 될 것입니다.