मैं बूटस्ट्रैप 4 का उपयोग कर रहा हूं। ड्रॉपडाउन अनुभाग में, ड्रॉपडाउन आइटम लंबवत प्रदर्शित होते हैं, यानी एक के नीचे एक। मैं इन ड्रॉपडाउन आइटम को क्षैतिज रूप से प्रदर्शित करता हूं, यानी एक के बगल में एक।

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
            <a class="navbar-brand" href="index.html">Brand Name</a>
            <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>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>
                <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">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <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>
                </li>                
              </ul>
            </div>
          </nav>

उपरोक्त कोड में, मैं चाहता हूं कि "ड्रॉपडाउन-आइटम" वर्ग वाले तत्व दूसरे के बगल में प्रदर्शित हों। मैंने बूटस्ट्रैप वेबसाइट संस्करण 4.3.1 से उपरोक्त कोड का उपयोग किया है।

1
Shreyas Vaidya 29 अक्टूबर 2019, 09:04

1 उत्तर

सबसे बढ़िया उत्तर

मुझे लगता है कि आपको .dropdown-menu कक्षा के CSS को अधिलेखित करना होगा। इसलिए इस क्लास को सीधे ओवरराइट करने के बजाय, एक कस्टम क्लास जैसे .dd-horizontal दें और नीचे CSS जोड़ें।

.dd-horizontal {
   display: flex;
}

साथ ही, आपको अन्य CSS प्रॉप्स को भी समायोजित करने की आवश्यकता है।

1
Yashwardhan Pauranik 29 अक्टूबर 2019, 06:13