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>
2018 업데이트-부트 스트랩 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여전히 인라인 요소에서 작동 한다는 것을 기억하십시오 .
부트 스트랩 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>
(또한 너비가 다양하기 때문에 버튼에 비정형 오른쪽 정렬 모양을 볼 수 없으므로 버튼에 최소 너비를 추가했습니다.)
부트 스트랩 사용 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>
v3.1.0부터 풀 오른쪽이 감가 상각되었습니다. 그냥 머리 위로.
http://getbootstrap.com/components/#callout-dropdown-pull-right
pull-right버튼에 클래스를 적용하십시오 . http://getbootstrap.com/css/#helper-classes-floats- > 도우미 클래스
이 링크는 도움이 될 것입니다
에서 부트 스트랩 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>
부트 스트랩 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;
}
이제 .dropdown-menu-right를 기존 .dropdown-menu 요소에 추가해야합니다. 풀 오른쪽은 더 이상 지원되지 않습니다. 자세한 정보는 여기 http://getbootstrap.com/components/#btn-dropdowns
빈 열을 사용하여 왼쪽에 공백을 넣을 수도 있습니다.
처럼
<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>
'Programing' 카테고리의 다른 글
| IIS Express에서 외부 요청을 활성화하는 방법은 무엇입니까? (0) | 2020.02.18 |
|---|---|
| 조건부로 React 컴포넌트에 속성을 추가하는 방법은 무엇입니까? (0) | 2020.02.18 |
| EditText에서 언더 바를 숨기는 방법 (0) | 2020.02.18 |
| node_modules에 로컬로 설치된 패키지를 사용하는 방법은 무엇입니까? (0) | 2020.02.18 |
| 상대 레이아웃의 백분율 너비 (0) | 2020.02.18 |