Bootstrap 3 ตัวแบ่งแนวนอน (ไม่อยู่ในดรอปดาวน์)

ฉันรู้ว่า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>

คำถามของฉันคือมีวิธีใดบ้างที่จะทำได้โดยไม่อยู่ในเมนูแบบเลื่อนลงเช่นใส่ลงในรายการประเภทใด ๆ หรือเมนูที่คล้ายกัน

ใช่คุณสามารถใส่<hr>รหัสของคุณในที่ที่คุณต้องการได้ฉันใช้รหัสนี้ในแถบด้านข้างแผงการดูแลระบบของฉันแล้ว

ขณะนี้ใช้ได้เฉพาะกับ.dropdown-menu:

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

หากคุณต้องการใช้งานอื่นใน css ของคุณเองหลังจาก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;
}

เนื่องจากฉันพบว่า<hr/>ขนาดBootstrap เริ่มต้นไม่น่าดูนี่คือ HTML และ CSS ง่ายๆเพื่อปรับสมดุลขององค์ประกอบด้วยภาพ:

HTML:

<hr class="half-rule"/>

CSS:

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