बूटस्ट्रैप 3 क्षैतिज विभक्त (ड्रॉपडाउन में नहीं)

Question

मुझे पता है Bootstrap 3कि एक क्षैतिज विभक्त आप ड्रॉपडाउन मेनू के अंदर इस तरह से लिंक अलग कर सकते हैं:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
   ...
  <li role="presentation" class="divider"></li>
</ul>

मेरा प्रश्न यह है कि क्या बिना ड्रॉपडाउन के ऐसा करने का कोई तरीका है, जैसे कि इसे किसी भी तरह की सूची या समान मेनू में डालना?

Answer 1

हाँ वहाँ है, आप बस <hr>अपने कोड में रख सकते हैं जहाँ आप इसे चाहते हैं, मैं पहले से ही अपने व्यवस्थापक पैनल साइड बार में इसका उपयोग करता हूं।

Comments

<hr />और भी बेहतर है।

— इरविन मेयर

@ErwinMayer <hr />XHTML के लिए है। HTML 4 या 5 में यह सिर्फ है<hr>

— डेव

यह एक पुराना उत्तर है, लेकिन उन लोगों के लिए जो मुझे पसंद करते हैं, <hr> का उपयोग ओपी मामले में प्रस्तुति उद्देश्य के लिए नहीं किया जाना चाहिए। यह अनुच्छेदों में विषयगत परिवर्तन के लिए है। जैसे किसी को P टैग का इस्तेमाल फॉर्मेट कंट्रोल में नहीं करना चाहिए।

— केएमसी

Answer 2

वर्तमान में यह केवल इसके लिए काम करता है .dropdown-menu:

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

यदि आप इसे अन्य उपयोग के लिए चाहते हैं, तो अपने स्वयं के सीएसएस में, bootstrap.css का अनुसरण करके एक और बनाएं:

.divider {
  height: 1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

Answer 3

जैसा कि मैंने डिफॉल्ट बूटस्ट्रैप <hr/>आकार को भद्दा पाया , यहाँ कुछ सरल HTML और सीएसएस तत्व को दृष्टिगत रूप से संतुलित करने के लिए है:

HTML:

<hr class="half-rule"/>

सीएसएस:

.half-rule { 
    margin-left: 0;
    text-align: left;
    width: 50%;
 }