Bootstrap 3 Dải phân cách ngang (không nằm trong menu thả xuống)

98

Tôi biết Bootstrap 3có một dải phân cách ngang mà bạn có thể đặt bên trong menu thả xuống để tách các liên kết như sau:

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

Câu hỏi của tôi là: Có cách nào để làm điều này mà không cần nó nằm trong danh sách thả xuống, chẳng hạn như đưa nó vào bất kỳ loại danh sách hoặc menu tương tự nào không?

twitter-bootstrap twitter-bootstrap-3

— KeplerIO
nguồn

241

Có, bạn có thể chỉ cần đặt <hr>mã của mình ở nơi bạn muốn, tôi đã sử dụng mã này trong một trong các thanh bên của bảng điều khiển quản trị của tôi.

— vog
nguồn

3

<hr />thậm chí còn tốt hơn.

— Erwin Mayer

21

@ErwinMayer <hr />dành cho XHTML. Trong HTML 4 hoặc 5 nó chỉ là<hr>

— Dave

1

Đó là một câu trả lời cũ, nhưng đối với những người vấp phải ở đây như tôi, <hr> không nên được sử dụng cho mục đích trình bày như trong trường hợp OP. Nó là để thay đổi chủ đề trong các đoạn văn. Cũng giống như người ta không nên sử dụng thẻ P để định dạng các điều khiển.

— KMC

16

Hiện tại nó chỉ hoạt động cho .dropdown-menu:

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

Nếu bạn muốn nó cho mục đích sử dụng khác, trong css của riêng bạn, sau bootstrap.css tạo một cái khác:

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

— Christina
nguồn

5

Vì tôi thấy <hr/>kích thước Bootstrap mặc định khó coi, đây là một số HTML và CSS đơn giản để cân bằng phần tử một cách trực quan:

HTML:

<hr class="half-rule"/>

CSS:

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

— David Metcalfe
nguồn