Thẻ <hr> trong Twitter Bootstrap không hoạt động đúng cách?

Đây là mã của tôi:

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

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

Thẻ hr dường như không hoạt động như tôi mong đợi. Thay vì vẽ một đường thẳng, nó tạo ra một khoảng trống, như sau:

tài sản css của <hr>là:

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

Nó tương ứng với một đường ngang 1px với một lề dọc màu xám và 18px.

và bởi vì <hr>bên trong a <div>không có lớp nên chiều rộng phụ thuộc vào nội dung của<div>

nếu bạn muốn <hr>có chiều rộng đầy đủ, hãy thay thế <div>bằng<div class='row'><div class='span12'> (bằng các thẻ đóng).

Nếu bạn mong đợi điều gì đó khác biệt, hãy mô tả những gì bạn mong đợi bằng cách thêm nhận xét.

Thay vì viết

<hr>

Viết

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

Và nó sẽ hiển thị toàn bộ chiều rộng như bình thường.

Tôi đã giải quyết điều này bằng cách đặt màu nền của HR thành màu đen như sau:

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

Đó là vì CSS DEFAULT của Bootstrap cho <hr />là ::

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

nó tạo ra khoảng cách 40px giữa hai dòng đó

vì vậy nếu bạn muốn thay đổi bất kỳ <hr />kiểu lề cụ thể nào trong trang của mình, bạn có thể thử một cái gì đó như thế này ::

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

nếu bạn muốn thay đổi giao diện / kiểu khác của bất kỳ kiểu cụ thể nào <hr /> trong trang của bạn như màu sắc và kiểu đường viền hoặc độ dày, bạn có thể thử một cái gì đó như:

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

cho tất cả <hr />trong trang của bạn

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

Theo mặc định, hrphần tử trong tệp CSS Twitter Bootstrap có lề trên và dưới là 18px. Đó là thứ tạo ra khoảng cách. Nếu bạn muốn khoảng cách nhỏ hơn, bạn sẽ cần điều chỉnh thuộc tính margin của hrphần tử.

Trong ví dụ của bạn, hãy làm như sau:

.container hr {
margin: 2px 0;
}

Tôi nghĩ sẽ đẹp hơn nếu chúng ta thêm viền-màu: trong suốt như bên dưới:

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

Nếu bạn không đặt viền trong suốt, nó sẽ có màu trắng và tôi không nghĩ rằng điều đó là tốt mọi lúc.

Tôi đã có thể tùy chỉnh hrTag bằng cách chỉnh sửa kiểu nội tuyến như:

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

Giờ đây, hrTag dày hơn và dễ nhìn thấy hơn; nó cũng có màu xám đậm hơn. Mã bootstrap thực sự rất linh hoạt. Như đoạn mã trình bày ở trên, bạn có thể sử dụng kiểu nội tuyến hoặc mã tùy chỉnh của riêng bạn. Hy vọng điều này sẽ giúp ai đó.

Bạn có thể muốn một trong những thứ này, vì vậy để tương ứng với bố cục 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>

Nếu không có DIVphần tử lưới bao gồm, bố trí có thể ảnh hưởng đến các thiết bị khác nhau.