बूटस्ट्रैप 4: ड्रॉपडाउन मेनू स्क्रीन के दाईं ओर जा रहा है

Question

मैं पृष्ठ से बाहर नहीं जाने के लिए ड्रॉप डाउन आइटम प्राप्त नहीं कर सकता। मैंने बीएस 3 से कुछ चीजों की कोशिश की, लेकिन वे काम नहीं करते। मुझे यकीन नहीं है अगर इसकी वजह से ml-auto। (यदि -अन्य कथनों की उपेक्षा करें)

यहाँ कूट है :

<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-menudiv में जोड़ें ।

<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

ओह, मुझे नहीं लगा कि कॉलिंग "ड्रॉपडाउन-मेनू-राइट" आइटम को बाईं ओर के पंक्ति में संरेखित करेगा धन्यवाद!

— bbennett36

यह काम किया है, लेकिन सभी ड्रॉपडाउन पर इस एक ही वर्ग को रखने की गलती .. इसलिए सुनिश्चित करें कि आप अंतिम ड्रॉपडाउन पर सिर्फ इस वर्ग को - जो स्क्रीन से बाहर जा रहे हैं।

— अब्देइली चंदनवाला

अद्यतन: यहाँ बूटस्ट्रैप 4 के अद्यतन मेनू संरेखण प्रलेखन है। इस उत्तर में उल्लिखित एक तारीख से बाहर है: getbootstrap.com/docs/4.5/compenders/dropdowns/#menu-alignment

— Paula

@Paula धन्यवाद पौला, वर्तमान डॉक्स और निर्भरता के साथ उत्तर को अपडेट किया।

— वैनब्रेन

Answer 2

आपकी शैली पत्रक में, .dropdown-menuपरिवर्तन के left: 0;लिए right: 0;।

Comments

ऐसा लगता है कि समाधान होना चाहिए, लेकिन इसके काम नहीं कर रहा है

— bbennett36

आपको बायीं विशेषता को निकालना होगा या फिर ऊपर काम नहीं करेगा क्योंकि यह अभी भी 0 पर सेट है। मैं सामान्य रूप से उपयोग करने से दूर रहता हूं! महत्वपूर्ण यह है कि यह खराब अभ्यास है।

— जीतें

मुझे लगता है कि बीएस 4 के साथ इसका डिफ़ॉल्ट है यही कारण है कि मैं महत्वपूर्ण का उपयोग कर रहा था।

— bbennett36

Answer 3

उन लोगों के लाभ के लिए जो गुगली करते समय इस मुद्दे पर ठोकर खाते हैं, लेकिन प्रतिक्रिया का उपयोग कर रहे हैं, स्वीकृत उत्तर (जबकि सही) आपके लिए समस्या का समाधान नहीं करेगा। जब आप इसे क्लासनेम में मैन्युअल रूप से जोड़ते हैं तो रिएक्ट 'ड्रॉपडाउन-मेनू-राइट' को अनदेखा करता है। इसके बजाय, नीचे अपना कोड अपडेट करें और यह उसी कक्षा को सही ढंग से सेट करता है।

जावास्क्रिप्ट के लिए

<DropdownMenu right>

टाइपस्क्रिप्ट के लिए

<DropdownMenu right={true}>

इसे यहां डालते हुए, क्योंकि यह धागा तब सामने आया था जब मैं इस मुद्दे को टाल रहा था और मुझे प्रतिक्रिया (रिएक्टस्ट्रैप) में बूटस्ट्रैप 4 के लिए सही समाधान निकालने में काफी समय लगा।

Comments

डॉक्स देखें: reactstrap.github.io/compenders/dropdowns "संरेखण" अनुभाग। (दी, यह मुझे इस उत्तर को खोजने के लिए डॉक्स में सही भाग खोजने में सक्षम होने के लिए ले गया)

— मिक्स 3 डी

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>