বুটস্ট্র্যাপ 4: ড্রপডাউন মেনুটি পর্দার ডানদিকে চলে যাচ্ছে

Question

পৃষ্ঠায় না যাওয়ার জন্য ড্রপ ডাউন আইটেমগুলি পাওয়া যায় না বলে আমি মনে করি। আমি বিএস 3 থেকে কয়েকটি জিনিস চেষ্টা করেছি কিন্তু তারা কাজ করে না বলে মনে হচ্ছে। আমি নিশ্চিত না যে এটি এমএল-অটোর কারণে। (যদি-অন্য বিবৃতি উপেক্ষা করুন)

এখানে কোডপেন :

<div class="container-fluid">
  <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;">

    <button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>

    </button>

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>

    </button>

    <!-- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button> -->

    <div id="logo">
      <a class="navbar-brand" href="/">Company</a>
    </div>

    <div class="collapse navbar-collapse" id="searchNav">
      <ul class="navbar-nav mx-auto">

        <form action="/search" class="form-inline">
          <input class="form-control mr-sm-2" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" />
          <!-- <div class="input-group"> -->

          <input class="form-control mr-sm-2" id="location" name="location" :value='location' type="text" placeholder="Location" />
          <!-- <button class="btn btn-secondary" type="button">Find Jobs</button> -->
          <!-- </span> -->
          <!-- </div> -->

          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Find Jobs</button>
        </form>

      </ul>
    </div>
    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="/post" class="nav-link"><strong>Post Job</strong></a></li>

        <div class="hidden-lg-up">

          <li v-if="!user_logged" class="nav-item">
            <a v-if="!user_logged" href="/signup" class="nav-link"><strong>Register</strong></a>
          </li>

          <li v-if="user_logged && user_type === 'user'" class="nav-item">
            <a v-if="user_logged && user_type === 'user'" href="/profile" class="nav-link"><strong>Profile</strong></a>
          </li>

          <li v-if="user_logged && user_type === 'user'" class="nav-item">
            <a v-if="user_logged && user_type === 'user'" href="/applied" class="nav-link"><strong>My Jobs</strong></a>
          </li>

          <li v-if="user_logged && user_type === 'user'" class="nav-item">
            <a v-if="user_logged && user_type === 'user'" href="/searches" class="nav-link"><strong>My Searches</strong></a>
          </li>

          <li v-if="user_logged && user_type === 'company'" class="nav-item">
            <a v-if="user_logged && user_type === 'company'" href="/dashboard" class="nav-link"><strong>Employer Dashboard</strong></a>
          </li>

          <li v-if="!user_logged" class="nav-item">
            <a v-if="!user_logged" href="/login" class="nav-link"><strong>Login</strong></a>
          </li>

          <li v-if="user_logged" class="nav-item">
            <a v-if="user_logged" href="/logout" class="nav-link"><strong>Logout</strong></a>
          </li>
        </div>

        <div class="hidden-md-down">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="/" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <strong>Account</strong>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

              <!-- <li v-if="!user_logged" class="nav-item"> -->
              <a v-if="!user_logged" href="/signup" class="dropdown-item"><strong>Register</strong></a>
              <!-- </li> -->

              <!-- <li v-if="user_logged && user_type === 'user'" class="nav-item"> -->
              <a v-if="user_logged && user_type === 'user'" href="/profile" class="dropdown-item"><strong>Profile</strong></a>
              <a v-if="user_logged && user_type === 'user'" href="/applied" class="dropdown-item"><strong>My Jobs</strong></a>
              <a v-if="user_logged && user_type === 'user'" href="/searches" class="dropdown-item"><strong>My Searches</strong></a>

              <!-- </li> -->

              <!-- <li v-if="user_logged && user_type === 'company'" class="nav-item"> -->
              <a v-if="user_logged && user_type === 'company'" href="/dashboard" class="dropdown-item"><strong>Employer Dashboard</strong></a>
              <!-- </li> -->

              <!-- <li v-if="!user_logged" class="nav-item"> -->
              <a v-if="!user_logged" href="/login" class="dropdown-item"><strong>Login</strong></a>
              <!-- </li> -->

              <!-- <li v-if="user_logged" class="nav-item"> -->
              <a v-if="user_logged" href="/logout" class="dropdown-item">
                <div class="dropdown-divider"></div>
                <strong>Logout</strong>
              </a>
              <!-- </li> -->
            </div>

          </li>
        </div>

      </ul>
    </div>
  </nav>

</div>

Answer 1

বুটস্ট্র্যাপ ইতিমধ্যে এটি নির্মিত হয়েছে: মেনু প্রান্তিককরণ দেখুন । ডিভের জন্য dropdown-menu-rightক্লাসটি যুক্ত করুন dropdown-menu।

<div class="dropdown-menu dropdown-menu-right">

কাজের উদাহরণ: (সম্পূর্ণ পৃষ্ঠা খুলুন)

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-xl navbar-dark bg-primary">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

  <a class="navbar-brand" href="#">Company</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form action="#" class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" />
      <input class="form-control mr-sm-2" id="location" name="location" :value='location' type="text" placeholder="Location" />
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Find Jobs</button>
    </form>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active">
          <strong>Post Job</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>Register</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>Profile</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>My Jobs</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>My Searches</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>Employer Dashboard</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>Login</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>Logout</strong>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <strong>Account</strong>
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item">
            <strong>Register</strong>
          </a>
          <a href="#" class="dropdown-item">
            <strong>Profile</strong>
          </a>
          <a href="#" class="dropdown-item">
            <strong>My Jobs</strong>
          </a>
          <a href="#" class="dropdown-item">
            <strong>My Searches</strong>
          </a>
          <a href="#" class="dropdown-item">
            <strong>Employer Dashboard</strong>
          </a>
          <a href="#" class="dropdown-item">
            <strong>Login</strong>
          </a>
          <a href="#" class="dropdown-item">
            <div class="dropdown-divider"></div>
            <strong>Logout</strong>
          </a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

Comments

ওহ, আমি "ড্রপডাউন-মেনু-ডান" কল করে আইটেমগুলি বামে সারিবদ্ধ করে রাখি বলে মনে করি না ধন্যবাদ!

— বিবিনেট 36

এটি কাজ করেছে, তবে সমস্ত ড্রপডাউনগুলিতে এই একই শ্রেণিটি স্থাপনের একটি ভুল .. সুতরাং নিশ্চিত হয়ে নিন যে আপনি কেবল এই ক্লাসটি শেষ ড্রপডাউন - যা পর্দার বাইরে চলেছে on

— আবেদালী চন্দনওয়ালা

আপডেট: বুটস্ট্র্যাপ 4 এর আপডেট হওয়া মেনু প্রান্তিককরণ ডকুমেন্টেশন এখানে। এই উত্তরে উল্লিখিত একটির মেয়াদ শেষ হয়ে গেছে: getbootstrap.com/docs/4.5/components/roddowns/#menu-alignment

— পলা

@ পলা ধন্যবাদ পলা, বর্তমান ডক্স এবং নির্ভরতার সাথে উত্তর আপডেট করেছেন।

— ভ্যানবুরেন

Answer 2

আপনার স্টাইল শীটে, .dropdown-menuপরিবর্তনের left: 0;জন্য right: 0;।

Comments

দেখে মনে হচ্ছে সমাধান হওয়া উচিত তবে এটি কাজ করছে না

— bbennett36

আপনাকে বাম বৈশিষ্ট্যটি সরিয়ে ফেলতে হবে অন্যথায় উপরেরটি কাজ করবে না যেহেতু এটি এখনও 0 এ সেট করা আছে আমি সাধারণত ব্যবহার থেকে ভাল থাকি না গুরুত্বপূর্ণ কারণ এটি খারাপ অনুশীলন।

— জিতুন

আমি BS4 এর সাথে এর ডিফল্ট মনে করি যার কারণে আমি গুরুত্বপূর্ণটি ব্যবহার করছিলাম।

— বিবেনেট 36

Answer 3

গুগল করার সময় যারা এই সমস্যাটিতে হোঁচট খাচ্ছেন কিন্তু প্রতিক্রিয়া ব্যবহার করছেন তাদের উপকারের জন্য, স্বীকৃত উত্তর (যখন সঠিক) আপনার পক্ষে সমস্যাটি সমাধান করবে না। আপনি ক্লাসনেমে ম্যানুয়ালি যোগ করার সময় প্রতিক্রিয়া 'ড্রপডাউন-মেনু-ডান' উপেক্ষা করে। পরিবর্তে, নীচে আপনার কোড আপডেট করুন এবং এটি সঠিকভাবে একই বর্গ সেট করে।

জাভাস্ক্রিপ্ট জন্য

<DropdownMenu right>

প্রকারলিপি জন্য

<DropdownMenu right={true}>

এখানে এই থ্রেডটি প্রদর্শিত হচ্ছে যখন আমি ইস্যুটি গুগল করছিলাম এবং প্রতিক্রিয়াতে রিট্যাক্ট (রিঅ্যাকট্র্যাপ) এর বুটস্ট্র্যাপ 4 এর সঠিক সমাধান বের করতে আমাকে বেশ খানিকটা সময় নিয়েছিল।

Comments

দস্তাবেজগুলি দেখুন: reactstrap.github.io/components/DPdowns "প্রান্তিককরণ" বিভাগ। (মঞ্জুর,

— ডক্সে

Answer 4

আমি আপনার কোডটি সন্ধান করছিলাম এবং আমি মনে করি গ্রহণযোগ্য উত্তরগুলি একটি ভিন্ন সমস্যার সমাধান করে। মেনুটি যদি পৃষ্ঠার বাম বা ডানদিকে চলে যায় এবং বোতামের নীচে না থাকে তবে এটি কারণ আপনি পিতামাতার ক্লাসটি হারিয়েছেন .btn-groupএবং মনে হচ্ছে আপনার .dropdown-toggleএবং .dropdown-menuক্লাসগুলি ভুল উপাদানগুলির মধ্যে রয়েছে। বুটস্ট্র্যাপ 4 ডক্সের সর্বাধিক প্রাথমিক উদাহরণ এখানে।

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

আমি কেবল আপনার কোডের একটি ছোট্ট ব্লক পেরিয়েছি, তবে শেষে যেখানে আপনার বড় স্ক্রিনে একটি ড্রপডাউন রয়েছে, আমি এটিতে দৃষ্টি নিবদ্ধ করেছি।

 <li class="nav-item dropdown"> <!--- change this line --->
            <a class="nav-link dropdown-toggle" href="/" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <strong>Account</strong>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

              <!-- <li v-if="!user_logged" class="nav-item"> -->
              <a v-if="!user_logged" href="/signup" class="dropdown-item"><strong>Register</strong></a>
              <!-- </li> -->

              <!-- <li v-if="user_logged && user_type === 'user'" class="nav-item"> -->
              <a v-if="user_logged && user_type === 'user'" href="/profile" class="dropdown-item"><strong>Profile</strong></a>
              <a v-if="user_logged && user_type === 'user'" href="/applied" class="dropdown-item"><strong>My Jobs</strong></a>
              <a v-if="user_logged && user_type === 'user'" href="/searches" class="dropdown-item"><strong>My Searches</strong></a>

              <!-- </li> -->

              <!-- <li v-if="user_logged && user_type === 'company'" class="nav-item"> -->
              <a v-if="user_logged && user_type === 'company'" href="/dashboard" class="dropdown-item"><strong>Employer Dashboard</strong></a>
              <!-- </li> -->

              <!-- <li v-if="!user_logged" class="nav-item"> -->
              <a v-if="!user_logged" href="/login" class="dropdown-item"><strong>Login</strong></a>
              <!-- </li> -->

              <!-- <li v-if="user_logged" class="nav-item"> -->
              <a v-if="user_logged" href="/logout" class="dropdown-item">
                <div class="dropdown-divider"></div>
                <strong>Logout</strong>
              </a>
              <!-- </li> -->
            </div>

          </li>

প্রতি

 <li class="nav-item btn-group">
            <a class="nav-link dropdown-toggle" href="/" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <strong>Account</strong>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

              <!-- <li v-if="!user_logged" class="nav-item"> -->
              <a v-if="!user_logged" href="/signup" class="dropdown-item"><strong>Register</strong></a>
              <!-- </li> -->

              <!-- <li v-if="user_logged && user_type === 'user'" class="nav-item"> -->
              <a v-if="user_logged && user_type === 'user'" href="/profile" class="dropdown-item"><strong>Profile</strong></a>
              <a v-if="user_logged && user_type === 'user'" href="/applied" class="dropdown-item"><strong>My Jobs</strong></a>
              <a v-if="user_logged && user_type === 'user'" href="/searches" class="dropdown-item"><strong>My Searches</strong></a>

              <!-- </li> -->

              <!-- <li v-if="user_logged && user_type === 'company'" class="nav-item"> -->
              <a v-if="user_logged && user_type === 'company'" href="/dashboard" class="dropdown-item"><strong>Employer Dashboard</strong></a>
              <!-- </li> -->

              <!-- <li v-if="!user_logged" class="nav-item"> -->
              <a v-if="!user_logged" href="/login" class="dropdown-item"><strong>Login</strong></a>
              <!-- </li> -->

              <!-- <li v-if="user_logged" class="nav-item"> -->
              <a v-if="user_logged" href="/logout" class="dropdown-item">
                <div class="dropdown-divider"></div>
                <strong>Logout</strong>
              </a>
              <!-- </li> -->
            </div>

          </li>