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

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

http://jsfiddle.net/HdeZ3/1/

<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이 작동하지 않는 두 가지 이유를 지적한다고 생각했습니다. 거기에서 작동하지 않습니다.

1. bootstrap.css 파일의 URL이 유효하지 않습니다. (아마도 질문을했을 때 효과가있었습니다).
2. 입력 요소에 type = "button"속성을 추가해야합니다. 그렇지 않으면 버튼으로 렌더링되지 않으며 입력 상자로 렌더링됩니다. 더 나은 방법은 <button>요소를 대신 사용하는 것입니다.
3. 또한 풀 오른쪽은 플로트를 사용하기 때문에 각 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>

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

부트 스트랩 사용 pull-right이 사용하기 때문에 도우미 것은 우리를 위해 작동하지 않았다 float: right있는 힘 inline-block이 될 요소block . 때 .btn의이되고 block, 그들은 자연 마진 손실 inline-block준 텍스트 요소로 제공되었다.

대신 direction: rtl;부모 요소를 사용 하여 해당 요소 내부의 텍스트가 오른쪽에서 왼쪽 inline-block으로 레이아웃되고 요소가 오른쪽에서 왼쪽으로 레이아웃됩니다. 다음과 같이 LESS를 사용하여 어린이도 배치되지 않도록 할 수 있습니다 rtl.

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

다음과 같이 사용하십시오.

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

에서 부트 스트랩 4 : 인 flexbox이 방법을 사용해보십시오. getbootstrap의 설명서를 참조하십시오

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

v3.1.0부터 풀 오른쪽이 감가 상각되었습니다. 그냥 머리 위로.

http://getbootstrap.com/components/#callout-dropdown-pull-right

pull-right버튼에 클래스를 적용하십시오 . http://getbootstrap.com/css/#helper-classes-floats > 도우미 클래스

이 링크는 도움이 될 것입니다

이제 .dropdown-menu-right를 기존 .dropdown-menu 요소에 추가해야합니다. 풀 오른쪽은 더 이상 지원되지 않습니다. 자세한 정보는 여기 http://getbootstrap.com/components/#btn-dropdowns

부트 스트랩 CSS와 함께 사용자 정의 CSS를 시도하여 변경 사항이 있는지 확인할 수 있습니다. 시험

.move-rigth{
    display: block;
    float: right;
}

그것이 작동하면 가지고있는 것을 조작하거나 이것에 다른 형식을 추가하고 원하는 것을 달성 할 수 있습니다. 부트 스트랩을 사용한다고해서 원하는 것을 제공하지 않으면 관리 할 수 ​​있습니다. 코드로 작업하고 있으므로 말한대로 수행하도록 명령합니다. 건배!

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

방금 layout..apply 스타일을 사용했습니다 ..

또는

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

CSS에서

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

빈 열을 사용하여 왼쪽에 공백을 넣을 수도 있습니다.

처럼

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

데모 :: Jsfiddle 데모

에서 부트 스트랩 V3.3.1 다음 CSS 스타일이 문제를 해결할 수

.modal-open{
    padding-right: 0 !important;
}

참고 : 위의 게시물과 모든 이전 버전의 모든 제안을 시도했지만 새로운 세트 부트 스트랩 버전에 대한 수정 사항은 제공하지 않습니다.

부트 스트랩 4 설명서

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>