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.4/utilities/float/

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

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

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

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="https://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="https://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="https://stackoverflow.com/">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>

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

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 클래스 추가

다른 사람과 Robert에 대한 추가 사항 인 경우 탐색에 플렉스 디스플레이 값이있는 경우 CSS에 추가하여 필요한 요소를 오른쪽으로 플로팅 할 수 있습니다.

{
    margin-left: auto;
}