Bootstrap 3: pull-right chỉ cho col-lg

Mới cho bootstrap 3 .... Trong bố cục của tôi, tôi có:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

Tôi muốn 'phần tử 2' KHÔNG được căn chỉnh ngay trên màn hình nhỏ hơn màn hình col-lg. Vì vậy, có hiệu quả khi lớp kéo chỉ dành cho col-lg-6 ...

Làm thế nào tôi có thể đạt được điều này?

Đây là một câu đố: http://jsfiddle.net/thibs/Y6WPz/

Cảm ơn bạn

Bạn có thể đặt "phần tử 2" trong một cột nhỏ hơn (ví dụ col-2:) và sau đó chỉ sử dụng pushtrên màn hình lớn hơn:

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

Bản trình diễn: http://bootply.com/88095

Một tùy chọn khác là ghi đè số float .pull-rightbằng cách sử dụng truy vấn @media ..

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Cuối cùng, một tùy chọn khác là tạo .pull-right-lglớp CSS của riêng bạn ..

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

CẬP NHẬT

Bootstrap 4 bao gồm các float đáp ứng , vì vậy trong trường hợp này bạn chỉ cần sử dụng float-lg-right.
Không cần thêm CSS .

Bootstrap 4 Demo

Hãy thử đoạn trích LESS này (Nó được tạo từ các ví dụ ở trên & các mixins truy vấn phương tiện trong Grid.less).

@media (min-width: @screen-sm-min) {
.pull-right-sm {
  float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
  float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
  float: right;
}
}

.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
    float: right;
}

.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
    float: left;
}
@media (max-width: 767px) {    
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}

Không cần phải tạo lớp của riêng bạn với các truy vấn phương tiện. Bootstrap 3 đã có thứ tự float cho các điểm dừng phương tiện trong Thứ tự cột: http://getbootstrap.com/css/#grid-column-ordering

Cú pháp cho lớp là col-<#grid-size>-(push|pull)-<#cols>nơi <#grid-size>là xs, sm, md hoặc lg và <#cols>là cách xa bạn muốn cột để di chuyển cho rằng kích thước lưới. Đẩy hoặc kéo là trái hoặc phải tất nhiên.

Tôi sử dụng nó mọi lúc để tôi biết nó hoạt động tốt.

Hoạt động tốt quá:

/* small screen portrait */

@media (max-width: 321px) {

  .pull-right { 
    float: none!important; 
  }

}


/* small screen lanscape */

@media (max-width: 480px) {

  .pull-right {
    float: none!important; 
  }

}

Thêm CSS hiển thị bên dưới vào ứng dụng Bootstrap 3 của bạn cho phép hỗ trợ cho

pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right

các lớp hoạt động chính xác như mới

float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right

các lớp đã được giới thiệu trong Bootstrap 4:

@media (min-width: 768px) {
    .pull-sm-left {
        float: left !important;
    }
    .pull-sm-right {
        float: right !important;
    }
    .pull-sm-none {
        float: none !important;
    }
}
@media (min-width: 992px) {
    .pull-md-left {
        float: left !important;
    }
    .pull-md-right {
        float: right !important;
    }
    .pull-md-none {
        float: none !important;
    }
}
@media (min-width: 1200px) {
    .pull-lg-left {
        float: left !important;
    }
    .pull-lg-right {
        float: right !important;
    }
    .pull-lg-none {
        float: none !important;
    }
}
.pull-none {
    float: none !important;
}

Ngoài ra, nó thêm

pull-{ε|sm-|md-|lg-}none

cho đầy đủ, tương thích với

float-{ε|sm-|md-|lg-|xl-}none

từ Bootstrap 4.

Đối với những người quan tâm đến căn chỉnh văn bản, một giải pháp đơn giản là tạo một lớp mới:

.text-right-large {
    text-align: right;
}
@media (max-width: 991px) {
    .text-right-large {
        text-align: left;
    }
}

Sau đó thêm lớp đó:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right-large">
        elements 2
    </div>
</div>

Nó rất đơn giản khi sử dụng Sass, chỉ cần sử dụng @extend:

.pull-right-xs { 
    @extend .pull-right;
 }

Đây là những gì tôi đang sử dụng. thay đổi @ screen-md-max cho các kích thước khác

/* Pull left in lg resolutions */
@media (min-width: @screen-md-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}

Vấn đề này được giải quyết trong bootstrap-4-alpha-2.

Đây là đường dẫn: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

Sao chép nó trên github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

Chỉ cần sử dụng các lớp tiện ích đáp ứng của bootstrap!

Giải pháp tốt nhất cho nhiệm vụ đó là sử dụng đoạn mã sau:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right">
        <div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
            elements 2
        </div>
    </div>
</div>

Phần tử sẽ được căn chỉnh sang bên phải chỉ trên lgmàn hình - phần còn lại displaythuộc tính sẽ được đặt thành blockmặc định cho divphần tử. Cách tiếp cận này đang sử dụng text-rightlớp trên phần tử cha thay vì pull-right.

Giải pháp thay thế:

Nhược điểm lớn nhất là mã html bên trong cần phải được lặp lại hai lần.

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right visible-lg">
            elements 2
         </div>
         <div class="hidden-lg">
            elements 2
         </div>
    </div>
</div>

Bạn có thể sử dụng đẩy và kéo để thay đổi thứ tự cột. Bạn kéo một cột và đẩy cột kia trên các thiết bị lớn:

<div class="row">
    <div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
    <div class="col-lg-6 col-md-6 col-lg-push-6">
         <div>
            elements 2
         </div>
    </div>
</div>

bây giờ bao gồm bootstrap 4:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');

và mã nên như thế này:

<div class="row">
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">
         <div class="pull-lg-right pull-xl-right">
            elements 2
         </div>
    </div>
</div>