বুটস্ট্র্যাপ 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' কোল-এলজি স্ক্রিনের চেয়ে ছোট আকারে সামঞ্জস্য না করা উচিত। কেবলমাত্র কর্ন-এলজি -6 এর জন্য ক্লাসটি টান-ডান কার্যকরভাবে কার্যকর করা ...

আমি কীভাবে এটি অর্জন করতে পারি?

এখানে একটি বেহালতা: http://jsfiddle.net/thibs/Y6WPz/

ধন্যবাদ

Comments

দেখে মনে হচ্ছে এটি বুটস্ট্র্যাপ 4

— এজে

সুতরাং এটি এখন বুটস্ট্র্যাপ 4 এ একটি জিনিস । শুধু ব্যবহার order-lg-1, order-lg-2আপনার কলাম etc.on।

— সীমানা

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 (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।
কোনও অতিরিক্ত সিএসএসের প্রয়োজন নেই ।

বুটস্ট্র্যাপ 4 ডেমো

Comments

এর জন্য ধন্যবাদ, তবে সামগ্রীতে অবশ্যই পূর্ণ 6 টি কলস ব্যবহার করা উচিত অন্যথায় এটি মোড়ানো হয়, যা আমরা চাই না।

— থিবস

মিডিয়া কোয়েরি না করার আশা করছিল, তবে তা করবে will আপনাকে ধন্যবাদ

— থিবস

Answer 2

এই কম স্নিপেটটি ব্যবহার করে দেখুন (এটি উপরের উদাহরণগুলি থেকে এবং গ্রিড.বিহীন মিডিয়া ক্যোয়ারী মিশ্রণ থেকে তৈরি হয়েছে)।

@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

এই সমাধানটি খনন করুন!

— পেজ

এটি বুটস্ট্র্যাপে যুক্ত করা উচিত।

— Lorem Ipsum ডলর

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>এক্স, এসএম, এমডি বা এলজি এবং <#cols>আপনি গ্রিড আকারের জন্য কলামটি কতদূর যেতে চান want ধাক্কা বা টান অবশ্যই বাম বা ডান হয়।

আমি এটি সর্বদা ব্যবহার করি তাই আমি জানি এটি ভালভাবে কাজ করে।

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

এটি সাস ব্যবহার করে খুব সহজ, কেবল ব্যবহার করুন @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-alpha.2

Comments

এটি এখানে ভালভাবে ব্যাখ্যা করা হয়েছে: v4-alpha.getbootstrap.com/components/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।

বিকল্প সমাধান:

সবচেয়ে বড় অসুবিধা হ'ল এইচটিএমএল কোডটির ভিতরে দুটি বার পুনরাবৃত্তি করা দরকার।

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