부트 스트랩 4 열로 예상대로 조정되지 않습니다.

4 열 부트 스트랩 반응 그리드가 있습니다.부트 스트랩 4 열로 예상대로 조정되지 않습니다.

xs는 4 열이 4 행으로 변경되므로 col-xs-12가 잘 작동합니다. lg는 페이지 전체에 걸쳐 col-lg-3, 4 열, 페이지의 1/4을 올바르게 처리합니다.

내가 내 문제가있는 md 및 sm 페이지의 크기를 줄이기 시작하면.

내가 md를 쳤을 때 2 열, col-md-6을 사용하여 2 개의 행을 얻기를 바랬다. 첫 번째 응답 레이아웃 변경에서 예상대로 첫 번째 행의 열 1과 2를 가져오고 예상대로 첫 번째 열의 두 번째 행에 열 3이 있지만 네 번째 열은 첫 번째 열의 새로운 세 번째 행

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
     <p>Some Text</p> 
    </div> 
    <div class="clearfix visible-xs-block"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
     <p>Some Text</p> 
    </div> 
    <div class="clearfix visible-xs-block visible-sm-block visible-md-block"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
     <p>Some text</p> 
    </div> 
    <div class="clearfix visible-xs-block visible-sm-block visible-md-block"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
     <p>Some text</p>    
    </div> 
</div>

모든 도움을 주시면 감사하겠습니다.

출처

2016-09-28 Ken

왜 많은 클리어 픽스가 있습니까? 그들을 제거하면 레이아웃이 잘 보일 것입니다. –

@Rachel S, 명확하게, 정의 된 3 div에서 clearfix 클래스를 제거하거나 visible - * - 블록 클래스도 제거하도록 했습니까? 난 단지 clearfix를 제거하고 여전히 대략 900px -> 1100px의 md 크기에서 예상대로 가지 않습니다. 해당 크기 열 1과 2가 예상대로 표시되면 열 3은 2 행에 있지만 두 번째 열은 첫 번째 열이 아니고 네 번째 열은 3 행 1 열에 있습니다. – Ken

시행 착오 후에 문제가 해결되었지만 지금은 생각합니다. clearfix 및 visible - * - 블록 클래스를 더 잘 이해할 수 있습니다. 모든 clearfix 및 visible - * - 블록 클래스를 제거한 다음 세 번째 열 앞에 clearfix 및 visible-md-block을 추가했습니다. 이제 예상대로 모든 크기로 표시됩니다. 이를 해결해 주셔서 감사합니다. – Ken

첫 번째 열과 나머지 열에 사용했습니다.

문제를 해결하는 모든 열에 대해서만 사용하십시오.

블록은 div에 대해 전체 너비를 사용하므로 sm 또는 md 블록을 사용하면 응답이 손실됩니다.

출처

2016-09-28 12:27:38

모든 clearfix 및 블록 클래스를 제거하고 필요한 경우에만 추가를 시도했습니다. 나는 아직도 MD 수준에서만 문제가 있습니다. 3 번째, 4 번째, 3 번째, 4 번째 전에 visible-md-block을 추가하면, 위의 내 코멘트에 설명 된 것처럼 여전히 3 개의 행이 표시됩니다. – Ken

visible-md-block은 여전히 전체 너비를 사용합니다. 모든 행에 대해 block을 사용하지 않아야합니다. –

부트 스트랩 4 열로 예상대로 조정되지 않습니다.

답변

관련 문제