[twitter-bootstrap] Twitter Bootstrap 버튼을 올바르게 정렬하려면 어떻게해야합니까?

여기에 간단한 데모가 있습니다.

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

순서가없는 목록이 있으며 각 목록 항목마다 왼쪽에 텍스트를 놓고 오른쪽 정렬 버튼을 원합니다. 풀 오른쪽을 사용하려고했지만 정렬이 완전히 엉망입니다. 내가 무엇을 잘못하고 있지?

답변

pull-right클래스 속성에 삽입 하고 부트 스트랩이 버튼을 정렬하도록하십시오.

들어 부트 스트랩 2.3 , 참조 : http://getbootstrap.com/2.3.2/components.html#misc > 도우미 클래스> .pull 오른쪽.

들어 부트 스트랩 3 , 참조 : https://getbootstrap.com/docs/3.3/css/#helper-classes > 도우미 클래스.

들어 부트 스트랩 4 , 참조 : https://getbootstrap.com/docs/4.0/utilities/float/#responsive

이 pull-right명령은 제거되었고 float-right일반적으로float-{sm,md,lg,xl}-{left,right,none}

답변

트위터 부트 스트랩 3에서 수업 풀 오른쪽을 시도하십시오.

class="btn pull-right"

답변

“pull-right”클래스는 텍스트 정렬 대신 “float : right”를 사용하기 때문에 올바른 방법이 아닐 수 있습니다.

부트 스트랩 3 CSS 파일 확인 457 행에서 “text-right”클래스를 찾았습니다.이 클래스는 텍스트를 오른쪽에 맞추는 올바른 방법이어야합니다.

일부 코드 :

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

답변

2019 업데이트-부트 스트랩 4.0.0

pull-right클래스는 이제 float-right부트 스트랩 4 …

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

ul 목록을 정렬하지 않고 행에 블록 요소를 사용하는 것이 좋습니다.

되어 float-right여전히 작동하지?

기억 부트 스트랩 (4) 지금 인 flexbox이며 , 많은 요소는 display:flex작동 플로트 오른쪽을 방지 할 수있다. 경우에 따라 util 클래스 는 Bootstrap 4 .row, Card 또는 Nav와 같이 flexbox 컨테이너 내부의 요소를 좋아 align-self-end하거나 ml-auto올바르게 정렬하기 위해 작동합니다.

또한 text-right여전히 인라인 요소에서 작동 한다는 것을 기억하십시오 .

부트 스트랩 4가 올바른 예를 정렬

부트 스트랩 3

pull-right수업을 사용하십시오 .

답변

button대신 태그를 input사용하고 pull-right클래스를 사용하십시오 .

pull-right 클래스는 두 버튼을 완전히 망쳐 놓지 만 오른쪽에 사용자 정의 여백을 정의 하여이 문제를 해결할 수 있습니다.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

그런 다음 클래스에 다음 CSS를 사용하십시오.

.RbtnMargin { margin-left: 5px; }

답변

부트 스트랩에서 패딩이 내장 된 컨테이너와 열 내에서 작업 할 때 허용되는 대답에 덧붙여 때로는 때로는 끌어 당기는 행을 만드는 자식 div가있는 전체 확장 열이 있습니다.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

또는 첫 번째 열을 오프셋하는 것과 함께 모든 열을 총 그리드 열 수 (기본적으로 12)까지 합산하십시오.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

답변

이전에 이미 답변 한 질문에 답장을 보내서 죄송합니다. 다른 사람들이 그것을 확인하고 허용 된 답변에 설명 된대로 풀 클래스가 왜 그런지 궁금해하는 경우를 대비하여 jsfiddle이 작동하지 않는 두 가지 이유를 지적한다고 생각했습니다. 거기에서 작동하지 않습니다.

bootstrap.css 파일의 URL이 유효하지 않습니다. (아마도 질문을했을 때 효과가있었습니다).
입력 요소에 type = “button”속성을 추가해야합니다. 그렇지 않으면 버튼으로 렌더링되지 않으며 입력 상자로 렌더링됩니다. 더 나은 방법은 <button>요소를 대신 사용하는 것입니다.
또한 풀 오른쪽은 플로트를 사용하기 때문에 각 LI의 높이가 버튼의 높이에 맞지 않기 때문에 버튼 레이아웃이 엇갈리게됩니다. LI에 라인 높이 또는 최소 높이 CSS를 추가하면이를 해결할 수 있습니다.

일 바이올린 : http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(또한 너비가 다양하기 때문에 버튼에 비정형 오른쪽 정렬 모양을 볼 수 없으므로 버튼에 최소 너비를 추가했습니다.)