Bootstrap 3 Horizontal Divider (tidak dalam dropdown)

98

Saya tahu Bootstrap 3memiliki pembagi horizontal yang dapat Anda tempatkan di dalam menu dropdown untuk memisahkan tautan seperti ini: 

<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>

Pertanyaan saya adalah: Apakah ada cara untuk melakukan ini tanpa harus berada di dropdown, seperti memasukkannya ke dalam daftar atau menu serupa?

twitter-bootstrap twitter-bootstrap-3 KeplerIO
sumber

Jawaban:

241

Ya ada, Anda cukup memasukkan <hr>kode Anda di tempat yang Anda inginkan, saya sudah menggunakannya di salah satu bilah samping panel admin saya.

vog
sumber
3
<hr />lebih baik.
Erwin Mayer
21
@ErwinMayer <hr />untuk XHTML. Dalam HTML 4 atau 5 hanya<hr>
Dave
1
Ini adalah balasan lama, tetapi bagi mereka yang tersandung di sini seperti yang saya lakukan, <hr> tidak boleh digunakan untuk tujuan presentasi seperti dalam kasus OP. Ini untuk perubahan tematik dalam paragraf. Sama seperti seseorang tidak boleh menggunakan tag P untuk memformat kontrol.
KMC
16

Saat ini ini hanya berfungsi untuk .dropdown-menu:

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

Jika Anda menginginkannya untuk penggunaan lain, di css Anda sendiri, ikuti bootstrap.css buat yang lain:

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

Karena saya menemukan <hr/>ukuran Bootstrap default tidak sedap dipandang, berikut beberapa HTML dan CSS sederhana untuk menyeimbangkan elemen secara visual:

HTML:

<hr class="half-rule"/>

CSS:

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