Bootstrap 3: tarik-kanan hanya untuk col-lg

Baru di bootstrap 3 .... Di layout saya, saya punya:

<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>

Saya ingin 'elemen 2' untuk TIDAK disejajarkan tepat di layar yang lebih kecil dari col-lg. Jadi secara efektif memiliki kelas pull-right hanya untuk col-lg-6 ...

Bagaimana saya bisa mencapai ini?

Berikut ini biola: http://jsfiddle.net/thibs/Y6WPz/

Terima kasih

Anda bisa meletakkan "elemen 2" di kolom yang lebih kecil (yaitu:) col-2dan kemudian gunakan hanya pushpada layar yang lebih besar:

<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>

Demo: http://bootply.com/88095

Pilihan lain adalah mengganti float .pull-rightmenggunakan kueri media @.

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

Terakhir, opsi lain adalah membuat .pull-right-lgkelas CSS Anda sendiri ..

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

MEMPERBARUI

Bootstrap 4 termasuk float responsif , jadi dalam hal ini Anda hanya akan menggunakan float-lg-right.
Tidak diperlukan CSS tambahan .

Demo Bootstrap 4

Coba cuplikan KURANG ini (Dibuat dari contoh di atas & gabungan kueri media di 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;
    }
}

Tidak perlu membuat kelas Anda sendiri dengan pertanyaan media. Bootstrap 3 sudah memiliki pemesanan mengambang untuk breakpoints media di bawah Kolom Pemesanan: http://getbootstrap.com/css/#grid-column-ordering

Sintaks untuk kelas adalah di col-<#grid-size>-(push|pull)-<#cols>mana <#grid-size>xs, sm, md atau lg dan <#cols>seberapa jauh Anda ingin kolom bergerak untuk ukuran kisi itu. Dorong atau tarik ke kiri atau kanan tentu saja.

Saya menggunakannya sepanjang waktu sehingga saya tahu itu bekerja dengan baik.

Juga berfungsi dengan baik:

/* small screen portrait */

@media (max-width: 321px) {

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

}


/* small screen lanscape */

@media (max-width: 480px) {

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

}

Menambahkan CSS yang ditunjukkan di bawah ini ke aplikasi Bootstrap 3 Anda memungkinkan dukungan untuk

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

kelas yang bekerja persis seperti yang baru

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

kelas yang telah diperkenalkan di 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;
}

Selain itu, ia menambahkan

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

untuk kelengkapan, kompatibel dengan

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

dari Bootstrap 4.

Bagi mereka yang tertarik dengan perataan teks, solusi sederhana adalah membuat kelas baru:

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

Kemudian tambahkan kelas itu:

<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>

Ini sangat sederhana menggunakan Sass, cukup gunakan @extend:

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

Inilah yang saya gunakan. ubah @ screen-md-max untuk ukuran lain

/* 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;
    }
}

Masalah ini diselesaikan di bootstrap-4-alpha-2.

Berikut tautannya: http://blog.getbootstrap.com/2015/12/12/bootstrap-4-alpha-2/

Kloning di github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

Cukup gunakan kelas utilitas responsif bootstrap!

Solusi terbaik untuk tugas itu adalah dengan menggunakan kode berikut:

<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>

Elemen akan disejajarkan ke kanan hanya pada lglayar - pada saat yang lain displayatribut akan diatur blocksebagaimana standarnya untuk divelemen. Pendekatan ini menggunakan text-rightkelas pada elemen induk alih-alih pull-right.

Solusi alternatif:

Kerugian terbesar adalah bahwa kode html di dalamnya perlu diulang dua kali.

<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>

Anda dapat menggunakan push dan pull untuk mengubah urutan kolom. Anda menarik satu kolom dan mendorong yang lain pada perangkat besar:

<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>

sekarang termasuk bootstrap 4:

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

dan kode harus seperti ini:

<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>