Bootstrap 4의 .pull-left 및 .pull-right 클래스는 어떻게 되었습니까?

Bootstrap 4의 .pull-left 및 .pull-right 클래스는 어떻게 되었습니까?

---

최신 버전에서는 pull-left 및 pull-right가 .pull- {xs, sm, md, lg, xl}-{left, right, none}으로 대체되었습니다.

즉, 간단한을 작성하는 대신 class="pull-right"지금 작성해야합니다.class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

덜 지루한 방법이 있습니까?

---

이 질문이 처음 제기 된 2016 년에 답은 다음과 같습니다.

$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')

그러나 이제 받아 들여진 대답은 Robert Went의 대답이어야합니다.

---

수업은 float-right float-sm-right등등입니다.

미디어 쿼리는 모바일 우선이므로 사용 float-sm-right하면 작은 화면 크기와 더 넓은 항목에 영향을 미치므로 각 너비에 대해 클래스를 추가 할 이유가 없습니다. 영향을 미치려는 가장 작은 화면 또는 float-right모든 화면 너비를 사용하십시오.

공식 문서 :

클래스 : https://getbootstrap.com/docs/4.3/utilities/float/

업데이트 : https://getbootstrap.com/docs/4.3/migration/#utilities

이전 버전의 Bootstrap을 기반으로 기존 프로젝트를 업데이트하는 경우 sass extend를 사용하여 이전 클래스 이름에 규칙을 적용 할 수 있습니다.

.pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}

---

float-right float-left float-xx-left및로 변경float-xx-right

---

2018 업데이트 (부트 스트랩 4.1 기준)

예, pull-left그리고 pull-right로 대체되었습니다 float-left및 float-right부트 스트랩 4.

그러나 Bootstrap 4가 이제 flexbox 이므로 모든 경우에 float 가 작동하지 않습니다 .

오른쪽 사용 자동 마진 (예 :에 정렬 인 flexbox의 아이들 ml-auto) 또는 인 flexbox 유틸 (예 : justify-content-end, align-self-end, 등).

예

Navs :

<ul class="nav">
   <li><a href class="nav-link">Link</a></li>
   <li><a href class="nav-link">Link</a></li>
   <li class="ml-auto"><a href class="nav-link">Right</a></li>
</ul>

빵 부스러기:

<ul class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li class="active"><a href="/">Link</a></li>
    <li class="ml-auto"><a href="/">Right</a></li>
</ul>

https://www.codeply.com/go/6ITgrV7pvL

그리드:

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3 ml-auto">Right</div>
</div>

---

col-*클래스 와 함께 다른 작업에서 열과 함께 사용하려는 경우 클래스를 사용할 수 order-*있습니다.

주문 클래스를 사용하여 열의 순서를 제어 할 수 있습니다. Bootstrap 4 문서 에서 자세히보기

부트 스트랩 문서의 간단한 :

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

---

Thay가 제거됩니다.

사용 float-left대신에 pull-left. 그리고 float-right대신 pull-right.

여기에서 부트 스트랩 문서를 확인 하십시오 .

반응 형 float에 .float- {sm, md, lg, xl}-{left, right, none} 클래스를 추가하고 .float-left 및 .float-에 중복되므로 .pull-left 및 .pull-right를 제거했습니다. 권리.

---

내 프로젝트에서 다음 클래스를 사용하여이 작업을 수행 할 수있었습니다.

d-flex justify-content-end

<div class="col-lg-6 d-flex justify-content-end">

---

다른 것은 나를 위해 일하지 않았습니다. 이건 해냈어. 이것은 누군가를 도울 수 있습니다.

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

모든 것을 clearfix div로 감싸는 것이 핵심입니다.

---

bootstrap-4 부동의 경우 float-left 또는 right 클래스 추가

---

For anyone else and just an addition to Robert, If your nav has flex display value, you can float the element that you need to the right, by adding this to its css

{
    margin-left: auto;
}

참고URL : https://stackoverflow.com/questions/39655110/what-happened-to-the-pull-left-and-pull-right-classes-in-bootstrap-4