Bootstrap 3: ดึงขวาสำหรับ col-lg เท่านั้น

ใหม่สำหรับ bootstrap 3 .... ในเลย์เอาต์ของฉันฉันมี:

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

ฉันไม่ต้องการให้ 'องค์ประกอบ 2' จัดชิดบนหน้าจอที่เล็กกว่า col-lg ดังนั้นการมีคลาส pull-right สำหรับ col-lg-6 เท่านั้น ...

ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?

นี่คือซอ: http://jsfiddle.net/thibs/Y6WPz/

ขอบคุณ

คุณสามารถใส่ "องค์ประกอบ 2" ในคอลัมน์ขนาดเล็ก (เช่น:) col-2จากนั้นใช้pushบนหน้าจอขนาดใหญ่เท่านั้น:

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

การสาธิต: http://bootply.com/88095

อีกทางเลือกหนึ่งคือการลบล้างการลอยของการ.pull-rightใช้แบบสอบถาม @media ..

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

สุดท้ายอีกทางเลือกหนึ่งคือการสร้าง.pull-right-lgคลาส CSS ของคุณเอง..

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

UPDATE

Bootstrap 4รวมถึงลอยตอบสนองfloat-lg-rightดังนั้นในกรณีนี้คุณควรที่จะใช้เพียงแค่
ไม่จำเป็นต้องใช้ CSSเพิ่มเติม

Bootstrap 4 Demo

ลองใช้ข้อมูลโค้ด LESS นี้ (สร้างจากตัวอย่างด้านบน & ผสมคิวรีสื่อใน 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;
    }
}

ไม่จำเป็นต้องสร้างชั้นเรียนของคุณเองด้วยแบบสอบถามสื่อ Bootstrap 3 มีคำสั่งลอยสำหรับเบรกพอยต์สื่อแล้วภายใต้การจัดลำดับคอลัมน์: http://getbootstrap.com/css/#grid-column-ordering

ไวยากรณ์สำหรับคลาสคือxs, sm, md หรือ lg อยู่col-<#grid-size>-(push|pull)-<#cols>ที่ไหน<#grid-size>และ<#cols>คุณต้องการให้คอลัมน์เคลื่อนที่ไปไกลแค่ไหนสำหรับขนาดกริดนั้น ผลักหรือดึงซ้ายหรือขวาแน่นอน

ฉันใช้มันตลอดเวลาดังนั้นฉันจึงรู้ว่ามันทำงานได้ดี

ทำงานได้ดีเช่นกัน:

/* small screen portrait */

@media (max-width: 321px) {

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

}


/* small screen lanscape */

@media (max-width: 480px) {

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

}

การเพิ่ม CSS ที่แสดงด้านล่างลงในแอปพลิเคชันBootstrap 3ของคุณจะช่วยให้สามารถรองรับไฟล์

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

คลาสที่ทำงานเหมือนใหม่

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

คลาสที่ได้รับการแนะนำใน 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;
}

นอกจากนั้นยังเพิ่ม

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

เพื่อความสมบูรณ์เข้ากันได้กับ

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

จาก Bootstrap 4.

สำหรับผู้ที่สนใจการจัดแนวข้อความวิธีง่ายๆคือสร้างคลาสใหม่:

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

จากนั้นเพิ่มชั้นเรียนนั้น:

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

มันง่ายมากโดยใช้ Sass เพียงใช้@extend:

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

นี่คือสิ่งที่ฉันใช้ เปลี่ยน @ screen-md-max สำหรับขนาดอื่น ๆ

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

ปัญหานี้แก้ไขได้ใน bootstrap-4-alpha-2

นี่คือลิงค์: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

โคลนบน github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

เพียงใช้คลาสยูทิลิตี้ที่ตอบสนองของ bootstrap!

ทางออกที่ดีที่สุดสำหรับงานนั้นคือใช้รหัสต่อไปนี้:

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

องค์ประกอบจะถูกจัดแนวไปทางขวาบนlgหน้าจอเท่านั้น- ส่วนที่เหลือdisplayแอตทริบิวต์จะถูกตั้งค่าblockเป็นค่าเริ่มต้นสำหรับdivองค์ประกอบ วิธีการนี้จะใช้ชั้นในองค์ประกอบหลักแทนtext-rightpull-right

ทางเลือกอื่น:

ข้อเสียที่ใหญ่ที่สุดคือโค้ด html ภายในจำเป็นต้องทำซ้ำสองครั้ง

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

คุณสามารถใช้ push and pull เพื่อเปลี่ยนลำดับคอลัมน์ คุณดึงคอลัมน์หนึ่งแล้วดันอีกคอลัมน์หนึ่งบนอุปกรณ์ขนาดใหญ่:

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

ตอนนี้รวม bootstrap 4:

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

และรหัสควรเป็นดังนี้:

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