부트 스트랩 4 소형 장치 전용 그리드 위치 맞춤 조정

Question

부트 스트랩 4를 사용하여 실제로는 스타일이 지정된 <a> 태그 인 "버튼"옆에 확인란을 지정하려고합니다. 체크 박스는 버튼과는 완전히 독립적이며 링크 일뿐입니다. 체크 박스와 같은 행에 링크가 있어야합니다. 페이지가 형제 col-sm-6 옆에있는 가장 바깥 쪽 col-sm-6을 표시 할만큼 충분히 넓 으면 모든 것이 좋습니다. 그러나 첫 번째 col-sm-6이 두 번째 col-sm-6의 맨 위 (왼쪽이 아닌)에 나타나는 정도로 창을 축소하면 확인란이 전체 행을 단독으로 차지하기 시작합니다.

는 바이올린을 참조하십시오 https://jsfiddle.net/kfgodb9d/6/

이 추악한 레이아웃을보고 괜찮은 레이아웃을 참조하여 확장 창을 축소.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-6"> 
     <div id="verticalActionButtonGroup"> 
      <div class="row"> 
      <div class="col-sm-3"> 
       the checkbox goes here 
      </div> 
      <div class="col-sm-9"> 
       the button-styled link goes here 
      </div> 

     ... and so forth until you hit a sibling col-sm-6... 

Answer 1

대신 col-sm-3 사용 col-3 대신의 col-sm-9 사용 col-9

그 BS4에 대신에 여분의 작은 xs-* 클래스

업데이트 바이올린 here

Answer 2

없다 유의하시기 바랍니다 col-sm-6 만 사용하십시오 col-6. Bootsrap 4에서 .col-sm- (소형 장치 - 화면 너비> = 576px) 너비가 576px 미만인 경우 .col- (추가 소형 ​​장치 - 화면 너비 < 576px)을 사용하십시오. col-6은 모든 소형 장치에서 항상 한 행에 있습니다.