부트 스트랩 4 토글의 수평 정렬이 실패합니다.

부트 스트랩 4 프레임 워크에서 Material Design Lite 토글 요소를 사용하고 있으며 요소를 열의 오른쪽에 정렬 할 수 없습니다.부트 스트랩 4 토글의 수평 정렬이 실패합니다.

"float-right"클래스는 Bootstrap 요소 (버튼)에서 잘 작동합니다. 나는 또한 "text-right"클래스를 컨테이너에 적용하려고했는데, justify-content-end, justify-content : flex-end, pull-right 등 ... 아무것도 작동하지 않습니다.

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 1</div> 
 
     <div class="col-4 float-right"> 
 
     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1"> 
 
      <input type="checkbox" id="switch-1" class="mdl-switch__input float-right" checked> 
 
      </label> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 2</div> 
 
     <div class="col-4 float-right"> 
 
     <button type="button" class="btn btn-primary float-right">Submit</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</body>

어떻게 열의 오른쪽에있는 요소를 정렬 할 수 있습니다? (오른쪽 정렬 토글, 텍스트가 왼쪽 정렬) 컨텍스트를 위해 나는 크롬의 설정과 비슷한 레이아웃을 얻기 위해 노력하고 있어요 :

출처

2017-09-13 tealowpillow

MD는 서면으로 http://rosskevin.github.io/bootstrap-material-design/components/utilities/ – mlegg

떠 NOT 오른쪽 끌어 당겨 오른쪽도 작동하지 않습니다 사용 . – tealowpillow

를 당신이 오른쪽으로 이상 이동 얻을 수있는 CSS 규칙으로. 떠 다니기 때문에 패딩을 사용하여 제대로 배치해야합니다. 또 다른 옵션은 컨트롤을 div.col-1에 넣고 이동할 공간을 줄이는 것입니다.

label.mdl-switch { width: auto !important; }

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 1</div> 
 
     <div class="col-4 float-right"> 
 
     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1"> 
 
      <input type="checkbox" id="switch-1" class="mdl-switch__input" checked> 
 
      </label> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 2</div> 
 
     <div class="col-4 float-right"> 
 
     <button type="button" class="btn btn-primary float-right">Submit</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

출처

2017-09-13 23:26:04 miken32

감사합니다! 그러나 나는 왜 "너비 : 자동"이 갑자기 오른쪽으로 끌어 당기는 지 잘 모르겠다. 'float-right'로 버튼을 오른쪽으로 정렬하고 토글을 왼쪽으로 정렬 한 이유는 무엇입니까? – tealowpillow

생성 된 요소는 설정 한'float : right' 규칙을 상속하지 않으며 왼쪽 정렬되어'div.col-4'의 전체 폭을 차지하도록'width : 100 %'를 지정합니다. 버튼은 단지 '

부트 스트랩 4 토글의 수평 정렬이 실패합니다.

답변

관련 문제