নতুন সংস্করণে টান-বাম এবং টান-ডানকে .pull- {xs, sm, md, lg, xl} - {বাম, ডান, কোনওটিই প্রতিস্থাপন করা হয়েছে}
এর অর্থ একটি সরল লেখার পরিবর্তে class="pull-right"আমার এখন লিখতে হবেclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"
এটি করার কি কোনও ক্লান্তিকর উপায় আছে?
উত্তর:
২০১ 2016 সালে ফিরে যখন এই প্রশ্নটি মূলত জিজ্ঞাসা করা হয়েছিল, উত্তরটি ছিল:
$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')
তবে এখন স্বীকৃত উত্তরটি রবার্ট ওয়েেন্টের হওয়া উচিত।
.float-{sm,md,lg,xl}-{left,right,none}এখন বাম / ডান / কোনও কিছুই ভাসমান নয় .pull-leftএবং .pull-rightসরানো হয়েছে।
.pull-right{@extend .pull-xs-right;}
ক্লাসগুলি float-right float-sm-rightইত্যাদি are
মিডিয়া ক্যোয়ারীগুলি মোবাইল-প্রথম, সুতরাং এটি ব্যবহার করে float-sm-rightছোট পর্দার আকার এবং আরও বিস্তৃত কিছু প্রভাবিত হবে, সুতরাং প্রতিটি প্রস্থের জন্য একটি শ্রেণি যুক্ত করার কোনও কারণ নেই। আপনি যে ক্ষুদ্রতম পর্দাটি প্রভাবিত করতে চান তা ব্যবহার করুন বা float-rightসমস্ত পর্দার প্রস্থের জন্য।
অফিসিয়াল ডক্স:
শ্রেণি: https://getbootstrap.com/docs/4.4/utilities/float/
আপডেট করা হচ্ছে: https://getbootstrap.com/docs/4.4/migration/#utilities
আপনি যদি বুটস্ট্র্যাপের পূর্ববর্তী সংস্করণের উপর ভিত্তি করে কোনও বিদ্যমান প্রকল্প আপডেট করছেন তবে আপনি পুরানো শ্রেণীর নামগুলিতে নিয়ম প্রয়োগ করতে স্যাস প্রসার ব্যবহার করতে পারেন:
.pull-right {
@extend .float-right;
}
.pull-left {
@extend .float-left;
}
2018 আপডেট করুন (বুটস্ট্র্যাপ 4.1 হিসাবে)
হ্যাঁ, pull-leftএবং বুটস্ট্র্যাপ 4 এর pull-rightসাথে float-leftএবং float-rightএর সাথে প্রতিস্থাপন করা হয়েছে ।
তবে বুটস্ট্র্যাপ 4 এখন ফ্লেক্সবক্স হওয়ায় সব ক্ষেত্রে ফ্লোট কাজ করবে না ।
ঠিক আছে, ব্যবহার স্বয়ংক্রিয় মার্জিন (অর্থাত: থেকে সারিবদ্ধ flexbox শিশুদের ml-auto) অথবা flexbox utils (অর্থাৎ, justify-content-end, align-self-end, ইত্যাদি ..)।
নাভস:
<ul class="nav">
<li><a href class="nav-link">Link</a></li>
<li><a href class="nav-link">Link</a></li>
<li class="ml-auto"><a href class="nav-link">Right</a></li>
</ul>
ব্রেডক্র্যাম্বস:
<ul class="breadcrumb">
<li><a href="https://stackoverflow.com/">Home</a></li>
<li class="active"><a href="https://stackoverflow.com/">Link</a></li>
<li class="ml-auto"><a href="https://stackoverflow.com/">Right</a></li>
</ul>
https://www.codeply.com/go/6ITgrV7pvL
গ্রিড:
<div class="row">
<div class="col-3">Left</div>
<div class="col-3 ml-auto">Right</div>
</div>
পরিবর্তন হয়েছে float-right float-left float-xx-leftএবংfloat-xx-right
আপনি যদি কলামগুলির সাথে সেগুলি col-*ক্লাসগুলির সাথে অন্য কোনও কাজের সাথে ব্যবহার করতে চান তবে আপনি ক্লাস ব্যবহার করতে পারেন order-*।
অর্ডার ক্লাস সহ আপনি আপনার কলামগুলির ক্রম নিয়ন্ত্রণ করতে পারেন। বুটস্ট্র্যাপ 4 ডকুমেন্টেশনে আরও দেখুন
বুটস্ট্র্যাপ ডক্স থেকে একটি সহজ:
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
pull-rightএবং pull-leftগ্রিড কলামগুলিতে কাজ করবেন না4.1
থাই সরানো হয়।
float-leftপরিবর্তে ব্যবহার করুন pull-left। এবং float-rightপরিবর্তে pull-right।
বুটস্ট্র্যাপ ডকুমেন্টেশন এখানে দেখুন :
ফ্লাট- {এসএম, এমডি, এলজি, এক্সএল} - responsive বাম, ডান, কিছুই নয় responsive প্রতিক্রিয়াশীল ফ্লোটের জন্য ক্লাস এবং অপসারণ করা হয়েছে .পুল-বাম এবং .পুল-ডান যেহেতু তারা .ফ্লোয়েট-বাম এবং .ফ্লোয়েট- এ অপ্রয়োজনীয় since ঠিক
আর কিছুই আমার পক্ষে কাজ করছিল না। এই এক করেছে। এটি কাউকে সাহায্য করতে পারে।
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
ক্লিয়ারফিক্স ডিভের মধ্যে সমস্ত কিছু মোড়ানো গুরুত্বপূর্ণ the
বুটস্ট্র্যাপ -4 ক্লাস ফ্লাট বাম বা ভাসমান জন্য ডান যোগ করুন
অন্য কারও জন্য এবং রবার্টের জন্য কেবল একটি সংযোজন, আপনার ন্যাভের যদি ফ্লেক্স ডিসপ্লে মান থাকে তবে আপনি এটির CSS এ যুক্ত করে ডানদিকে আপনার প্রয়োজনীয় উপাদানটি ভাসা করতে পারবেন
{
margin-left: auto;
}
ml-autoএবংmr-auto
.pull-xs-rightবৃহত্তর ডিভাইসগুলিতেও সিএসএস ক্যাসকেডগুলি হওয়ায় এই বস্তুটি সমস্ত পর্দার আকারে ডানদিকে ভাসতে পারে। পিএস সম্ভবত এটি আরও সাম্প্রতিক সংস্করণগুলিতে পরিবর্তিত হয়েছে তবে আপনার.float-rightপরিবর্তে এটি ব্যবহার করা উচিত.pull-right।