টুইটার বুটস্ট্র্যাপ ড্রপডাউন পর্দার বাইরে যায়

Question

আমি টুইটার বুটস্ট্র্যাপ ড্রপডাউন মেনুটি প্রয়োগ করতে চাই, এখানে আমার কোডটি রয়েছে:

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

ড্রপডাউন ভাল কাজ করে, আমার ড্রপডাউনটি স্ক্রিনের ডান প্রান্তের পাশে স্থাপন করা হয় এবং আমি যখন আমার ড্রপডাউন-টগল ক্লিক করি তখন তালিকাটি পর্দার বাইরে চলে যায়। এটি পর্দার মতো দেখাচ্ছে:

আমি কীভাবে এটি ঠিক করতে পারি?

Comments

: সঠিক উত্তরটি এই প্রশ্নের (বুটস্ট্র্যাপ> = V 3.2.0 জন্য) এখানে সমাধান করা stackoverflow.com/questions/23654962/... @cvrebert দ্বারা।

— মাইকেল ট্রাউ

আমি বিশ্বাস করি যে আপনার কোডটিতে একটি শেষ স্প্যান ট্যাগ অনুপস্থিত: </ span>

— স্টিলথিস্ন্যাকস

Answer 1

এটি .pull-rightকরা ul.dropdown-menuউচিত যোগ করা

অবজ্ঞানের বিজ্ঞপ্তি: বুটস্ট্র্যাপ v3.1.0 হিসাবে,.pull-right ড্রপডাউন মেনুগুলিকে করা হয়েছে । একটি মেনু ডান সারিবদ্ধ করতে, ব্যবহার করুন .dropdown-menu-right।

Comments

এটি সম্পূর্ণ পৃথক প্রশ্ন

— দেওয়েন

ব্যবহারকারী যদি কিছু ছোট স্ক্রিন ডিভাইস ব্যবহার করে তবে এই উত্তরটি সমস্যার সমাধান করে না - এটি ডান পাশের স্থানে বাম পাশের বাইরে চলে যাচ্ছে (বাস্তবে আপনি কেবল টান-বামটিকে টান-ডানদিকে পরিবর্তন করেন)।

— বেনামে

ক্রিজিচু উত্তরটিকে বুটস্ট্র্যাপ হিসাবে দেখুন .পুল-ডান হ্রাস করা হয়েছে

— জেরোইন

পছন্দ করুন আপনার ড্রপডাউনগুলি বোতামটি বন্ধ হয়ে গেছে?

— কোয়েলটন বি হিগগিনবটম

Answer 2

যেহেতু বুটস্ট্র্যাপ v3.1.0 যুক্ত অ্যাড .pull-rightড্রপডাউন মেনুতে অবচয় রয়েছে । একটি .dropdown-menu-rightযোগ করা উচিত ul.dropdown-menuপরিবর্তে। ডক্স

Comments

এমনকি সর্বশেষতম বুটস্ট্র্যাপ সহ .পুল-ডান আমার জন্য কাজ করে এবং .ড্রপডাউন-মেনু-ডান কিছুই করে না।

— শেন গ্রান্ট

এটি প্রকৃতপক্ষে বুটস্ট্র্যাপ 4 এ কাজ করে, আপনি ক্লাস যুক্ত না করে .ড্রপডাউন-মেনু-থেকে ডভ.ড্রপডাউন-মেনুতে (উল নয়)

— তীমথিয় কানস্কি

<ul class="dropdown-menu dropdown-menu-right">আমার জন্য 4.1.1

— dw1

Answer 3

বুটস্ট্র্যাপ 4 এর জন্য, dropdown-menu-rightকাজগুলি যুক্ত করা। এখানে একটি কাজের উদাহরণ ..

http://codeply.com/go/w2MJngNkDQ

Comments

আমি অন্যান্য সমস্ত উত্তর চেষ্টা করে দেখেছি - এবং এই শুধুমাত্র আমার জন্য কাজ করেছিল। আমি বুটস্ট্র্যাপ বনাম 4.1.0 ব্যবহার করছি।

— জেঠ

Answer 4

এমন একটি সমাধান যা কেবলমাত্র সিএসএস হ'ল এইচটিএমএল সংশোধন করার প্রয়োজন হয় না

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

এটি গতিশীলভাবে উত্পন্ন মেনুগুলির জন্য বিশেষত কার্যকর যেখানে সর্বদা dropdown-menu-rightশেষ উপাদানটিতে প্রস্তাবিত শ্রেণি যুক্ত করা সম্ভব নয়

Comments

বুটস্ট্র্যাপের জন্য এটিই একমাত্র সমাধান

— 4.0.০.০

Answer 5

আপনি .dropdown-pull-rightনিম্নলিখিত সিএসএস সহ ক্লাস ব্যবহার করতে পারেন :

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Answer 6

বুটস্ট্র্যাপ 4 এ আপনি .ড্রোফেল্ট ব্যবহার করতে পারেন

কেবলমাত্র এতে পরিবর্তন করুন:

<span class="dropleft">

অথবা

। ড্রপডাউন-মেনুতে drop lg, med, sm, xs} - ডানদিকে যুক্ত করুন

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

Answer 7

float-*-right বুটস্ট্র্যাপ 4 এর জন্য

* = এক্স, এস এম, এমডি, এলজি

Answer 8

আমি কোনও মন্তব্য রাখতে পারছি না কারণ আমার এসও স্তরটি খুব কম, তবে আমি ঠিক করেছি যে প্যারেন্ট কন্টেইনারটি "ওভারফ্লো: লুকানো" তে সেট করা আছে (এছাড়াও নিশ্চিত হয়ে নিন যে অবস্থানটি সেট করা আছে)।

<div style="overflow:hidden;position:relative">
    <span class="dropdown"> 
    <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
      <li class="divider"></li>
      <li><a href="#">d</a></li>
    </ul>
</div>