बूटस्ट्रैप 4 में ड्रॉपडाउन में तीर कैसे निकालना है?

118

मैं बूटस्ट्रैप 4 का उपयोग कर रहा हूं। मैंने ड्रॉपडाउन में तीर निकालने की कोशिश की।

बूटस्ट्रैप 3 के लिए मुझे जो उत्तर मिले, वे किसी भी अधिक काम नहीं करते हैं।

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

css twitter-bootstrap twitter-bootstrap-4

— होंगबो मियाओ
स्रोत

176

बस तत्व से "ड्रॉपडाउन-टॉगल" वर्ग को हटा दें। ड्रॉपडाउन तब भी काम करेगा जब आपके पास डेटा-टॉगल विशेषता निम्नानुसार होगी

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

ओवरड्राइडिंग .dropdown-toggle class स्टाइल सभी ड्रॉपडाउन को प्रभावित करता है और आप अन्य बटनों में तीर रखना चाह सकते हैं, इसीलिए यह मुझे सबसे सरल उपाय लगता है।

संपादित करें: यदि आप बॉर्डर स्टाइल रखना चाहते हैं, तो ड्रॉपडाउन क्लास रखें

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

— İल्टर काजन .cal
स्रोत

3

किसी कारण से, अन्य समाधान मेरे लिए काम नहीं कर रहे थे। मैं बूटस्ट्रैप 4 चला रहा हूं। यह एकमात्र ऐसी चीज थी जो काम करती थी।

— anonymousacorn

9

यह मेरे लिए काफी काम नहीं था। बटन का दायाँ भाग अब गोल नहीं है।

— जैस ब्राउनिंग

कस्टम सीएसएस के साथ लिखने की तुलना में सरल !important:)

— हुगजेडी

2

मैं यह परीक्षण किया है और यह बहुत अच्छी तरह से काम करता है! एफएफ, क्रोम, आईई और ओपेरा में परीक्षण किया गया - यहां तक कि बिल्ड-इन ब्राउज़र के साथ मोबाइल एंड्रॉइड डिवाइसों पर कोई कष्टप्रद तीर नहीं है - धन्यवाद बहुत कुछ! सूचना: पूर्ण "ड्रॉपडाउन-टॉगल" विशेषता को न निकालें, बस "-टॉगल" विशेषता को हटा दें, ताकि ड्रॉपडाउन के लिए आपकी स्टाइल से छुटकारा न मिले। तो "ड्रॉपडाउन-टॉगल" "ड्रॉपडाउन" में बदल जाता है - आशा है कि यह मदद करता है।

— केरीम यगमुर्कु

126

सीएसएस के साथ, आप बस यही कर सकते हैं:

.dropdown-toggle::after {
    display:none;
}

— Clyff
स्रोत

11

मुझे !importantइस कस्टम CSS को प्रभावी होने के लिए शामिल करना था ।

— जैस ब्राउनिंग

1

यदि आप एक ही सीएसएस का उपयोग कर रहे हैं तो यह अन्य पृष्ठों में उपयोग की जाने वाली हर गिरावट को प्रभावित करेगा।

— पवन नाथ

केवल बटन के लिए तीर अक्षम करने के लिए कुछ और उपसर्ग जोड़ें, उदाहरण के लिए: .btn.btn-outline-secondary.dropdown-toggle :: after {प्रदर्शन: कोई नहीं; महत्वपूर्ण; }

— puppylpg

35

मैं किसी भी मौजूदा उत्तर की अनुशंसा नहीं करता क्योंकि:

.dropdown-toggleसिर्फ कार्यवाहक की तुलना में अधिक स्टाइल है। तत्व से वर्ग को हटाने से स्टाइल की समस्या होती है ।
ओवरराइड करने का .dropdown-toggleकोई मतलब नहीं है। सिर्फ इसलिए कि आपको किसी विशेष तत्व की देखभाल की आवश्यकता नहीं है, इसका मतलब यह नहीं है कि आपको बाद में एक की आवश्यकता नहीं होगी।
::afterड्रॉपडाउन वेरिएंट (कुछ उपयोग ::before) को कवर नहीं करता है ।

.caret-offअपने .dropdown-toggleतत्व के रूप में एक कस्टम तत्व का उपयोग करें :

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

— rybo111
स्रोत

3

सर्वश्रेष्ठ उत्तर, मैं अन्य लोगों के लिए कुछ अतिरिक्त जानकारी जोड़ूंगा, जैसे इस वर्ग को साथ जोड़ा जाना चाहिए dropdown-toggle।

— eestein

12

"ड्रॉपडाउन-टॉगल" वर्ग को हटा दें

— अब्दुल्ला अलकुरदी
स्रोत

4

यह एक टिप्पणी की तरह है

— mrun 12

5

यदि आप तीर को किसी अन्य आइकन (जैसे, FontAwesome) के साथ बदलने में रुचि रखते हैं, तो आपको बस .drop-toggle के छद्म तत्व पर सीमा को हटाने की आवश्यकता होगी।

.dropdown-toggle::after { border: none; }

— लोगन फ्रैंकलिन
स्रोत

4

मैं अपनी परियोजना में काफी समय से स्वीकृत उत्तर का उपयोग कर रहा था, लेकिन अभी बूटस्ट्रैप द्वारा उपयोग किए गए एक चर पर ठोकर खाई :

$enable-caret: true !default;

यदि आप इसे गलत पर सेट करते हैं तो किसी भी कस्टम कोड को किए बिना कैरट को हटा दिया जाएगा।

मेरा प्रोजेक्ट रूबी / रेल्स था इसलिए मैं बूटस्ट्रैप-रूबीगैम का उपयोग कर रहा था । मैं एक आयात करके चर बदल custom-variables.scssमेरी में गलत पर ऊपर चर सेट के साथ application.scss पहलेbootstrap.scss फ़ाइल / फ़ाइलें।

— bensmithbwd
स्रोत

2

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

.dropdown-toggle::after {
    display:none;
}

लेकिन शायद यह नहीं है कि आप क्या चाहते हैं, इसलिए सिर्फ विशिष्ट बटन को हटाने के लिए, हम एक वर्ग सम्मिलित करने जा रहे हैं: रेमोसेरेट, और हम वर्ग फिट करेंगे: ड्रॉपडाउन-टॉगल निम्नानुसार है:

.removecaret.dropdown-toggle::after {
    display: none;
}

और हमारा HTML कुछ इस तरह दिखता है:

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>

— krekto
स्रोत

1

CSS बॉर्डर का उपयोग करके Boostrap इसे उत्पन्न करता है:

.dropdown-toggle:after {
  border: none;
}

— हुकुम का इक्का
स्रोत

1

यदि आप इस बूटस्ट्रैप बटन वर्ग में वास्तव में केवल बनाना चाहते हैं, तो बनाएं:

.btn .dropdown-toggle::after {
    display:none;
}

— एस। ज़ब्र
स्रोत

0

क्या आपने कक्षा के भीतर टैग = "ए" की कोशिश की है? यह बिना css के तीर को छुपाता है।

— jerryurenaa
स्रोत

-1

वर्ग-घोषणा टॉगल करने के लिए ड्रॉप-डाउन में कोई तीर न जोड़ें

— कार्ल लीनर
स्रोत

-2

यह बूटस्ट्रैप 4 और एनजी-बूटस्ट्रैप पर काम करता है।

.dropdown-toggle:after {
    display: none;
}

— alvic
स्रोत

3

दो वर्षीय पुराने उत्तर को कॉपी करना, लेकिन एक टाइपो के साथ।

— miken32