แท็ก <hr> ใน Twitter Bootstrap ทำงานไม่ถูกต้อง?

นี่คือรหัสของฉัน:

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

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

ดูเหมือนว่าแท็ก hr จะไม่ทำงานตามที่ฉันคาดหวังไว้ แทนที่จะลากเส้นมันจะสร้างช่องว่างดังนี้:

คุณสมบัติ css ของ<hr>are:

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'>(ตามแท็กปิด)

หากคุณคาดหวังสิ่งที่แตกต่างออกไปให้อธิบายสิ่งที่คุณคาดหวังโดยการเพิ่มความคิดเห็น

แทนที่จะเขียน

<hr>

เขียน

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

และจะแสดงเต็มความกว้างตามปกติ

ฉันแก้ไขสิ่งนี้โดยตั้งค่าสีพื้นหลังของ HR เป็นสีดำดังนี้:

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

เป็นเพราะCSS DEFAULTของ Bootstrap สำหรับ<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>

โดยค่าเริ่มต้นhrองค์ประกอบในไฟล์ Twitter Bootstrap CSS จะมีขอบบนและล่างเป็นไฟล์18px. นั่นคือสิ่งที่ทำให้เกิดช่องว่าง หากคุณต้องการให้ช่องว่างเล็กลงคุณจะต้องปรับคุณสมบัติระยะขอบของhrองค์ประกอบ

ในตัวอย่างของคุณทำสิ่งนี้:

.container hr {
margin: 2px 0;
}

ฉันคิดว่ามันจะดูดีกว่าถ้าเราเพิ่ม border-color: transparent ตามด้านล่าง:

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

ถ้าคุณไม่ใส่เส้นขอบแบบโปร่งใสมันจะเป็นสีขาวและฉันไม่คิดว่านั่นจะดีตลอดเวลา

ฉันสามารถปรับแต่ง 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>

ตอนนี้ hrTag หนาขึ้นและมองเห็นได้ชัดเจนขึ้น นอกจากนี้ยังมีสีเทาเข้มขึ้น รหัส bootstrap มีความยืดหยุ่นมาก ดังตัวอย่างข้างต้นคุณสามารถใช้รูปแบบอินไลน์หรือโค้ดที่คุณกำหนดเองได้ หวังว่านี่จะช่วยใครบางคนได้

คุณอาจต้องการสิ่งเหล่านี้เพื่อให้สอดคล้องกับเค้าโครง Bootstrap:

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

<!-- or -->

<div class="col-xs-12">
    <hr style="border-style: dashed; border-top-width: 2px;">
</div>

<!-- or -->

<div class="col-xs-12">
    <hr class="col-xs-1" style="border-style: dashed; border-top-width: 2px;">
</div>

หากไม่มีDIVองค์ประกอบแบบกริดการจัดวางอาจหยุดชะงักบนอุปกรณ์ต่างๆ