আমি নিম্নলিখিত ড্রপডাউন আছে
<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
dropdown content goes here
</ul>ড্রপডাউনটির উপরের-বাম কোণটি পাঠ্যের নীচে-বাম কোণে রয়েছে (অ্যাকশন), তবে আমি আশা করি যে ড্রপডাউনটির উপরের-ডান কোণটির অবস্থানটি পাঠ্যের নীচের ডানদিকে রয়েছে। আমি এটা কিভাবে করবো?
উত্তর:
এটি সেই প্রভাব যা আমরা অর্জন করার চেষ্টা করছি:
যে ক্লাসগুলিতে প্রয়োগ করা দরকার সেগুলি বুটস্ট্র্যাপ ৩.১.০ প্রকাশের সাথে আবার বুটস্ট্র্যাপ the এর রিলিজের মাধ্যমে পরিবর্তন করা হয়েছে below নীচের সমাধানগুলির মধ্যে যদি কোনওটি আপনার বুটস্ট্র্যাপের সংস্করণ সংখ্যার দ্বিগুণ কাজ করে না বলে মনে হয় এবং অন্য একটি চেষ্টা করুন।
আপনি pull-rightক্যারেটের সাহায্যে মেনুটির ডানদিকে লাইন করতে ক্লাসটি ব্যবহার করতে পারেন :
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>ফিডল: http://jsfiddle.net/joeczucha/ewzafdju/
V3.1.0 অনুসারে, আমরা ড্রপডাউন মেনুতে ডানদিকে ডানদিকে অবচয় রেখেছি। একটি মেনু ডান-সারিবদ্ধ করতে .ড্রপডাউন-মেনু-ডান ব্যবহার করুন। নাবারে ডান-প্রান্তিক এনএভি উপাদানগুলি মেনুটিকে স্বয়ংক্রিয়ভাবে সারিবদ্ধ করতে এই শ্রেণীর একটি মিশ্রণ সংস্করণ ব্যবহার করে। এটিকে ওভাররাইড করতে, .ড্র্যাপডাউন-মেনু-বাম ব্যবহার করুন।
আপনি dropdown-rightক্যারেটের সাহায্যে মেনুটির ডানদিকে লাইন করতে ক্লাসটি ব্যবহার করতে পারেন :
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>ফিডল: http://jsfiddle.net/joeczucha/1nrLafxc/
বুটস্ট্র্যাপ 4 এর ক্লাসটি বুটস্ট্র্যাপ> 3.1.0 এর মতই, আশেপাশের বাকি মার্কআপটি কিছুটা পরিবর্তিত হওয়ায় কেবল নজর রাখুন:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
Link
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">...</a>
</div>
</li>class="dropdown"
অন্যান্য লোকেরা কীভাবে এই সমস্যাটি সমাধান করে বা বুটস্ট্র্যাপের এর জন্য কোনও কনফিগারেশন রয়েছে কিনা তা সম্পর্কে নিশ্চিত নন।
আমি এই থ্রেডটি পেয়েছি যা একটি সমাধান সরবরাহ করে:
https://github.com/twbs/bootstrap/issues/1411
একটি পোস্ট ব্যবহার করার পরামর্শ দেয়
<ul class="dropdown-menu" style="right: 0; left: auto;">আমি পরীক্ষা করেছি এবং এটি কাজ করে।
বুটস্ট্র্যাপ উপরের সিএসএসের মাধ্যমে নয়, এটি করার জন্য কনফিগারেশন সরবরাহ করে কিনা তা জানতে আশা করি।
চিয়ার্স।
বুটস্ট্র্যাপ ডকের ভিত্তিতে:
V3.1.0 হিসাবে, .পুল-ডানটি ড্রপডাউন মেনুগুলিতে অবচিত হয়। ড্রেড। ডাউনডাউন-মেনু ব্যবহার করুন
উদাহরণ:
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">আপনি যদি মেনুটি উপরে প্রদর্শন করতে চান তবে কেবল "ড্রপআপ" ক্লাস যুক্ত করুন
এবং একই বিভাগ থেকে উপস্থিত থাকলে "ড্রপডাউন" ক্লাসটি সরিয়ে দিন।
<div class="btn-group dropup">
এমনকি দেরি হলেও আমি আশা করি আমি কাউকে সাহায্য করতে পারি। যদি ড্রপডাউন মেনু বা সাবমেনু স্ক্রিনের ডানদিকে থাকে তবে এটি বাম দিকে খোলা থাকে, যদি মেনু বা সাবমেনু বামদিকে থাকে তবে ডানদিকে খোলা থাকে।
$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
var liparent=$(this.parentElement);
var ulChild=liparent.find('ul');
var xOffset=liparent.offset().left;
var alignRight=($(document).width()-xOffset)<xOffset;
if (liparent.hasClass("dropdown-submenu"))
{
ulChild.css("left",alignRight?"-101%":"");
}
else
{
ulChild.toggleClass("dropdown-menu-right",alignRight);
}
});উল্লম্ব অবস্থান সনাক্ত করতে আপনি যুক্ত করতে পারেন
$( document ).ready(function() {
var liparent=$(".dropdown");
var yOffset=liparent.offset().top;
var toTop=($(document).height()-yOffset)<yOffset;
liparent.toggleClass("dropup",toTop);
});বুস্টারপ এর একটি ক্লাস রয়েছে যার নাম রয়েছে navbar-right। সুতরাং আপনার কোড নীচের মত দেখতে হবে:
<ul class="nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>