[twitter-bootstrap] 부트 스트랩의 div 내에서 왼쪽 정렬 및 오른쪽 정렬

Program / 글쓴이

부트 스트랩의 div 컨테이너 내에서 텍스트를 왼쪽 정렬하고 다른 텍스트를 오른쪽 정렬하는 일반적인 방법은 무엇입니까?

예 :

Total cost                   $42

총 비용 이상은 왼쪽 정렬 텍스트 여야하고 $ 42는 오른쪽 정렬 텍스트입니다.

답변

2018 업데이트 …

부트 스트랩 4.1 이상

  • pull-right 지금 float-right
  • text-right 3.x와 동일하며 인라인 요소에서 작동합니다.
  • 모두 float-*하고 text-*있습니다 반응 폭이 다른 서로 다른 정렬 (예 : float-sm-right)

flexbox 유틸리티 (예 🙂 justify-content-between를 정렬에 사용할 수도 있습니다.

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

또는 ml-auto모든 flexbox 컨테이너 (행, 탐색 모음, 카드, d-flex 등)의 자동 여백 (예 🙂

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

부트 스트랩 4 정렬 데모
부트 스트랩 4 오른쪽 정렬 예 (부동, flexbox, 텍스트 오른쪽 등)

부트 스트랩 3

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

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

부트 스트랩 3 데모

다음 text-right과 같이 클래스를 사용할 수도 있습니다 .

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

부트 스트랩 3 데모 2

답변

pull-right클래스 를 사용하는 대신 페이지 크기를 조정하는 동안 문제가 발생 text-right하기 때문에 열에서 클래스 를 사용하는 것이 좋습니다 pull-right.

답변

Bootstrap 4에서 정답은 text-xs-right클래스 를 사용하는 것 입니다.

xsBS에서 가장 작은 뷰포트 크기를 나타 내기 때문에 작동합니다 . 원하는 경우을 사용하여 뷰포트가 중간 이상인 경우에만 정렬을 적용 할 수 있습니다 text-md-right.

최신 알파에서는 text-xs-right로 단순화되었습니다 text-right.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

답변

부트 스트랩 v4는 flexbox 지원을 소개합니다

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

https://v4-alpha.getbootstrap.com/utilities/flexbox/ 에서 자세히 알아보십시오.

답변

Bootstrap 4 Flexbox로 달성 할 수 있습니다 :

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

예 : JSFiddle

답변

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

그 일을 잘해야합니다.

답변