बूटस्ट्रैप 3: केवल कोल-एलजी के लिए पुल-राइट

Question

बूटस्ट्रैप 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-6 ...

मैं इसे कैसे हासिल कर सकता हूं?

यहाँ एक पहेली है: http://jsfiddle.net/thibs/Y6WPz/

धन्यवाद

Comments

इस तरह लगता है बूटस्ट्रैप 4 में एक समर्थित सुविधा हो सकता है

— eggy

तो यह अब बूटस्ट्रैप 4 में एक बात है । बस अपने स्तंभों का उपयोग करें order-lg-1, order-lg-2आदि।

— ११:०१ पर चूना

Answer 1

आप "एलिमेंट 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सीएसएस वर्ग बनाने के लिए है ..

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

अपडेट करें

बूटस्ट्रैप 4 में संवेदनशील फ़्लोट शामिल हैं , इसलिए इस मामले में आप अभी उपयोग करेंगे float-lg-right।
कोई अतिरिक्त CSS की आवश्यकता नहीं है ।

बूटस्ट्रैप 4 डेमो

Comments

इसके लिए धन्यवाद, लेकिन सामग्री को पूर्ण 6 कॉल का उपयोग करना चाहिए अन्यथा यह लपेटता है, जो हम नहीं चाहते हैं।

— थिब्स

मीडिया क्वेरी नहीं होने की उम्मीद कर रहा था, लेकिन यह करेगा। धन्यवाद आप

— Thibs

Answer 2

इस 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;
}
}

Comments

इस समाधान ty खोदो!

— पीज

इसे बूटस्ट्रैप में जोड़ा जाना चाहिए।

— लोरम इप्सम डोलर

Answer 3

.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;
    }
}

Comments

अच्छा, यह डिफ़ॉल्ट बूटस्ट्रैप का हिस्सा होना चाहिए!

— ओवेन

Answer 4

मीडिया के प्रश्नों के साथ अपनी कक्षा बनाने की कोई आवश्यकता नहीं है। बूटस्ट्रैप 3 में पहले से ही कॉलम ऑर्डर के तहत मीडिया ब्रेकप्वाइंट के लिए फ्लोटिंग ऑर्डर है: http://getbootstrap.com/css/#grid-column-ordering

वर्ग के लिए सिंटैक्स वह col-<#grid-size>-(push|pull)-<#cols>जगह है जहाँ <#grid-size>xs, sm, md या lg है और <#cols>आप ग्रिड आकार के लिए कॉलम को कितनी दूर ले जाना चाहते हैं। पुश या पुल कोर्स के बाएं या दाएं है।

मैं इसे हर समय उपयोग करता हूं इसलिए मुझे पता है कि यह अच्छी तरह से काम करता है।

Answer 5

ठीक काम भी करता है:

/* small screen portrait */

@media (max-width: 321px) {

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

}


/* small screen lanscape */

@media (max-width: 480px) {

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

}

Answer 6

अपने बूटस्ट्रैप 3 एप्लिकेशन के नीचे दिखाए गए सीएसएस को जोड़ने के लिए समर्थन सक्षम करता है

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

कक्षाएं जो बिल्कुल नए की तरह काम करती हैं

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

कक्षाएं जो बूटस्ट्रैप 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

बूटस्ट्रैप 4 से।

Answer 7

पाठ संरेखण में रुचि रखने वालों के लिए, एक सरल समाधान एक नया वर्ग बनाना है:

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

Answer 8

यह Sass का उपयोग करके बहुत सरल है, बस उपयोग करें @extend:

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

Answer 9

यह मैं उपयोग कर रहा हूँ। अन्य आकारों के लिए @ स्क्रीन-एमडी-अधिकतम बदलें

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

Answer 10

यह समस्या बूटस्ट्रैप-4-अल्फा -2 में हल की गई है।

यहाँ लिंक है: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

इसे गितुब पर क्लोन करें : https://github.com/twbs/bootstrap/tree/v4.0.0-spp.2

Comments

यह यहाँ अच्छी तरह से समझाया गया है: v4-alpha.getbootstrap.com/compenders/utilities/…

— ziiweb

Answer 11

बस बूटस्ट्रैप की उत्तरदायी उपयोगिता वर्गों का उपयोग करें!

उस कार्य के लिए सबसे अच्छा समाधान निम्नलिखित कोड का उपयोग करना है:

<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-rightइसके बजाय मूल तत्व पर वर्ग का उपयोग कर रहा है pull-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>

Answer 12

आप स्तंभ क्रम बदलने के लिए पुश और पुल का उपयोग कर सकते हैं। आप एक स्तंभ को खींचते हैं और दूसरे को बड़े उपकरणों पर धकेलते हैं:

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

Answer 13

अब बूटस्ट्रैप 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>