ट्विटर में <hr> टैग बूटस्ट्रैप सही ढंग से काम नहीं कर रहा है?

Question

यहाँ मेरा कोड है:

<div class="container">
<div>
<h1>Welcome TeamName1</h1>
  asdf
  <hr>
  asdf

</div>
</div> <!-- /container -->

Hr टैग काम नहीं करता है क्योंकि मैं इसकी उम्मीद करूंगा। एक रेखा खींचने के बजाय, यह एक अंतर बनाता है, जैसे:

Answer 1

की सीएसएस संपत्ति <hr>हैं:

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  margin: 18px 0;
}

यह 1px क्षैतिज रेखा के साथ एक बहुत ही हल्के ग्रे और 18px के ऊर्ध्वाधर मार्जिन के अनुरूप है।

और क्योंकि बिना वर्ग के <hr>अंदर <div>की चौड़ाई सामग्री पर निर्भर करती है<div>

यदि आप चाहते हैं <hr>पूरी चौड़ाई हो सकता है, की जगह <div>के साथ <div class='row'><div class='span12'>(बंद करने टैग अनुसार के साथ)।

यदि आप कुछ अलग करने की अपेक्षा करते हैं, तो एक टिप्पणी जोड़कर जो आप अपेक्षा करते हैं उसका वर्णन करें।

Comments

धन्यवाद! एहसास नहीं था कि आपको <div> के अंदर <hr> को शामिल करना था। अजीब।

— काइल कार्लसन

मैं मान रहा हूं कि पिछले 12 वर्षों में किसी समय बूटस्ट्रैप को हटा दिया गया है क्योंकि मेरे पास यह नहीं है, लेकिन मेरे शरीर की सामग्री और दोनों पंक्ति वर्गों में क्षैतिज नियम डालने से मेरे लिए काम हुआ।

— केसी

border-color: #EEEEEE -moz-use-text-color #FFFFFF;केवल साथ ठीक करेंborder-color: #EEEEEE;

— स्लावेज़ 13

स्पैन 12 को कॉल-

— एसम

आपके कोड का यह हिस्सा ( border-width: 1px 0;) एक 2pxक्षैतिज रेखा का कारण बनता है ! आपको इसे बदलना चाहिए: border-width: 1px 0 0 0;एक 1pxक्षैतिज रेखा बनाने के लिए ।

— RAM

Answer 2

लिखने के बजाय

<hr>

लिखो

<hr class="col-xs-12">

और यह सामान्य की तरह पूरी चौड़ाई प्रदर्शित करेगा।

Comments

<div class="w-100"><hr></div>

— द्रुमला

यह बूटस्ट्रैप के लिए सबसे सुरुचिपूर्ण समाधान है, धन्यवाद!

— क्रिस्टोफर बेल्स

<hr class="w-100">चौड़ाई निर्धारित करने के लिए एक अधिक आत्म-स्पष्ट विधि प्रतीत होती है।

— रोबोबेनक्लेन जूल

Answer 3

मैंने एचआर पृष्ठभूमि-रंग को काले की तरह सेट करके इसे हल किया:

<hr style="width: 100%; color: black; height: 1px; background-color:black;" />

Comments

यह वास्तव में समस्या को हल नहीं कर रहा है, एक हैक की तरह ... इनलाइन स्टाइल की तुलना में बूटस्ट्रैप स्टाइल को ओवर-राइड करने के कई बेहतर तरीके हैं।

— आयनिकबर्गर

कृपया @DjangoBurger को विस्तृत करें और अपना समाधान साझा करें।

— जेम्स के

मुझे लगता है कि @DjangoBurger ज्यादातर इनलाइन शैलियों के बारे में शिकायत कर रहा है। आप इस शैली को एक कक्षा में रख सकते थे और यहाँ classname असाइन कर सकते थे। मैंने आपके समाधान को अपने स्वयं के उपयोग के लिए संशोधित किया, इसलिए धन्यवाद!

— स्वप्नकुमार

सहमत - यह एक सुंदर उपाय है :)

— जेम्स के

अच्छी तरह से काम! मैं बूटस्ट्रैप का उपयोग कर रहा हूं और किसी तरह मेरा <hr> असामान्य था - यह पारदर्शी था और स्पष्ट रूप से नहीं देखा गया था।

Answer 4

यह इसलिए क्योंकि बूटस्ट्रैप के डिफ़ॉल्ट सीएसएस के लिए <hr />है ::

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

यह उन दो लाइनों के बीच 40px अंतर पैदा करता है

इसलिए यदि आप <hr />अपने पृष्ठ में किसी विशेष मार्जिन शैली को बदलना चाहते हैं तो आप कुछ इस तरह का प्रयास कर सकते हैं ::

<hr style="margin-bottom:5px !important; margin-top:5px !important; " />

यदि आप <hr /> अपने पृष्ठ में रंग / बॉर्डर प्रकार या मोटाई किसी भी अन्य की उपस्थिति / अन्य शैलियों को बदलना चाहते हैं, तो आप कुछ इस तरह की कोशिश कर सकते हैं:

<hr style="border-top: 1px dotted #000000 !important; " />

<hr />अपने पेज में सभी के लिए

<style>
   hr {
       border-top: 1px dotted #000000 !important;
       margin-bottom:5px !important; 
       margin-top:5px !important;
   }
</style>

Answer 5

डिफ़ॉल्ट रूप से, hrट्विटर बूटस्ट्रैप सीएसएस फ़ाइल में तत्व के ऊपर और नीचे मार्जिन है 18px। यही एक अंतर पैदा करता है। यदि आप चाहते हैं कि अंतर छोटा हो तो आपको hrतत्व की मार्जिन संपत्ति को समायोजित करने की आवश्यकता होगी ।

अपने उदाहरण में, कुछ इस तरह से करें:

.container hr {
margin: 2px 0;
}

Answer 6

मुझे लगता है कि अगर हम सीमा-रंग जोड़ते हैं तो बेहतर होगा: नीचे के अनुसार पारदर्शी:

<hr style="width: 100%; background-color: black; height: 1px; border-color : transparent;" />

यदि आप सीमा को पारदर्शी नहीं रखते हैं तो यह सफेद हो जाएगा और मुझे नहीं लगता कि यह हर समय अच्छा है।

Answer 7

मैं इनलाइन स्टाइल को इस तरह संपादित करके hrTag को कस्टमाइज़ करने में सक्षम था:

<div class="row"> <!-- You can also position the row if need be. -->
<div class="col-md-12 col-lg-12"><!-- set width of column I wanted mine to stretch most of the screen-->
<hr style="min-width:85%; background-color:#a1a1a1 !important; height:1px;"/>
</div>
 </div>

घंटाघर अब मोटा और अधिक दिखाई दे रहा है; यह गहरे भूरे रंग का भी है। बूटस्ट्रैप कोड वास्तव में बहुत लचीला है। जैसा कि स्निपेट ऊपर प्रदर्शित करता है, आप इनलाइन स्टाइलिंग या अपने स्वयं के कस्टम कोड का उपयोग कर सकते हैं। आशा है कि यह किसी की मदद करता है।