<hr> tag di Twitter Bootstrap tidak berfungsi dengan benar?

94

Ini kode saya:

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

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

Tag hr tampaknya tidak berfungsi seperti yang saya harapkan. Alih-alih menggambar garis, itu menciptakan celah, seperti:

masukkan deskripsi gambar di sini

twitter-bootstrap Henry Henrinson
sumber

Jawaban:

141

properti css <hr>adalah:

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

Ini sesuai dengan garis horizontal 1px dengan abu-abu yang sangat terang dan margin vertikal 18px.

dan karena <hr>berada di dalam <div>kelas tanpa, lebarnya tergantung pada konten<div>

jika Anda ingin <hr>lebar penuh, ganti <div>dengan <div class='row'><div class='span12'>(dengan tag penutup yang sesuai).

Jika Anda mengharapkan sesuatu yang berbeda, jelaskan apa yang Anda harapkan dengan menambahkan komentar.

baptme
sumber
3
Terima kasih! Tidak menyadari Anda harus memasukkan <hr> di dalam <div>. Aneh.
Kyle Carlson
3
Saya berasumsi span12 telah dihapus dari Bootstrap di beberapa titik dalam dua tahun terakhir karena saya tidak memilikinya, tetapi meletakkan konten tubuh saya dan aturan horizontal di kelas baris berhasil untuk saya.
Casey
1
perbaiki border-color: #EEEEEE -moz-use-text-color #FFFFFF;hanya denganborder-color: #EEEEEE;
Slowaways
2
span12 telah digantikan oleh col-sm-12
M_Griffiths
Bagian dari kode Anda ( border-width: 1px 0;) ini menyebabkan 2pxgaris horizontal! Anda harus mengubahnya menjadi: border-width: 1px 0 0 0;untuk membuat 1pxgaris horizontal.
RAM
42

Alih-alih menulis

<hr>

Menulis

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

Dan itu akan menampilkan lebar penuh seperti biasa.

Makanan daging dan sayur
sumber
6
<div class="w-100"><hr></div>
drzymala
Ini adalah solusi paling elegan untuk Bootstrap, terima kasih!
Christopher Bales
<hr class="w-100">tampaknya menjadi metode yang lebih jelas untuk mengatur lebar.
Robobenklein
40

Saya menyelesaikan ini dengan mengatur warna latar belakang HR menjadi hitam seperti:

<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
James K
sumber
4
Ini tidak benar-benar menyelesaikan masalah, lebih seperti retas ... Ada banyak cara yang lebih baik untuk mengatasi gaya bootstrap secara berlebihan daripada dengan gaya sebaris.
IonicBurger
1
Harap uraikan @DjangoBurger dan bagikan solusi Anda.
James K
1
Saya pikir @DjangoBurger sebagian besar mengeluh tentang gaya sebaris. Anda bisa meletakkan gaya ini di kelas dan menetapkan nama kelas di sini. Saya memodifikasi solusi Anda seperti itu untuk penggunaan saya sendiri, jadi terima kasih!
dreamerkumar
Setuju - itu obat yang elegan :)
James K
Bekerja dengan sempurna! Saya menggunakan bootstrap dan entah bagaimana <hr> saya tidak biasa - transparan dan tidak terlihat jelas.
17

Hal ini karena Bootstrap ini DEFAULT CSS untuk <hr />adalah ::

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

itu menciptakan celah 40px antara dua garis tersebut

jadi jika Anda ingin mengubah <hr />gaya margin tertentu di halaman Anda, Anda dapat mencoba sesuatu seperti ini:

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

jika Anda ingin mengubah tampilan / gaya lain apa pun <hr /> di halaman Anda seperti warna dan jenis atau ketebalan perbatasan, Anda dapat mencoba sesuatu seperti:

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

untuk semua yang ada <hr />di halaman Anda

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

Secara default, hrelemen dalam file CSS Bootstrap Twitter memiliki margin atas dan bawah 18px. Itulah yang menciptakan celah. Jika Anda ingin celahnya lebih kecil, Anda harus menyesuaikan properti margin hrelemen.

Dalam contoh Anda, lakukan sesuatu seperti ini:

.container hr {
margin: 2px 0;
}
finspin
sumber
3

Saya pikir akan terlihat lebih baik jika kita menambahkan border-color: transparent seperti di bawah ini:

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

Jika Anda tidak menempatkan perbatasan transparan itu akan menjadi putih dan saya tidak berpikir itu baik sepanjang waktu.

Asu13
sumber
2

Saya dapat menyesuaikan hrTag dengan mengedit gaya sebaris seperti:

<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 sekarang lebih tebal dan lebih terlihat; itu juga merupakan warna abu-abu yang lebih gelap. Kode bootstrap sebenarnya sangat fleksibel. Seperti yang ditunjukkan cuplikan di atas, Anda dapat menggunakan gaya sebaris atau kode kustom Anda sendiri. Semoga ini bisa membantu seseorang.

Panggil aku Andy
sumber
0

Anda mungkin menginginkan salah satunya, agar sesuai dengan tata letak 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>

Tanpa DIVelemen kisi yang disertakan, tata letak dapat mengerem pada perangkat yang berbeda.

F8ER
sumber