Тег <hr> у Twitter Bootstrap не працює належним чином?

93

Ось мій код:

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

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

Здається, тег hr не працює, як я очікував би. Замість того, щоб малювати лінію, вона створює пробіл, приблизно так:

twitter-bootstrap

— Генрі Генрінсон
джерело

140

властивістю css <hr>є:

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

Він відповідає горизонтальній лінії 1 піксель із дуже світло-сірим та вертикальним краєм 18 пікселів.

і оскільки <hr>всередині <div>класу без, ширина залежить від вмісту<div>

якщо ви хочете, <hr>щоб вона була на всю ширину, замініть <div>на <div class='row'><div class='span12'>(з відповідними закриваючими тегами).

Якщо ви очікуєте чогось іншого, опишіть, чого ви очікуєте, додавши коментар.

— baptme
джерело

3

Дякую! Не розумів, що вам потрібно було включити <hr> всередину <div>. Непарні

— Kyle Carlson

3

Я припускаю, що span12 був видалений із Bootstrap в якийсь момент протягом останніх двох років, тому що у мене його немає, але розміщення вмісту мого тіла та горизонтального правила як у класах рядків працювало для мене.

— Кейсі

1

виправити border-color: #EEEEEE -moz-use-text-color #FFFFFF;лишеborder-color: #EEEEEE;

— Slowaways

2

span12 замінено col-sm-12

— M_Griffiths

Ця частина вашого коду ( border-width: 1px 0;) спричиняє 2pxгоризонтальний рядок! Вам слід змінити його на: border-width: 1px 0 0 0;зробити 1pxгоризонтальну лінію.

— RAM

39

Замість того, щоб писати

<hr>

Пишіть

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

І він буде відображати повну ширину, як зазвичай.

— Гарячий горщик
джерело

4

<div class="w-100"><hr></div>

— drzymala

Це найелегантніше рішення для Bootstrap, дякую!

— Крістофер

<hr class="w-100">здається більш зрозумілим методом встановлення ширини.

— Robobenklein

38

Я вирішив це, встановивши для фону тла HR чорний колір так:

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

— Джеймс К.
джерело

4

Це не зовсім вирішення проблеми, більше схоже на хакерство ... Існує набагато кращих способів переборщити стилі бутстрапа, ніж у вбудованому стилі.

— IonicBurger

1

Будь ласка, розробіть @DjangoBurger та поділіться своїм рішенням.

— James K

1

Я думаю, що @DjangoBurger здебільшого скаржиться на вбудовані стилі. Ви могли б помістити цей стиль у клас і присвоїти тут назву класу. Я модифікував ваше рішення таким чином для власного використання, тож дякую!

— dreamerkumar

Погодився - це елегантний засіб :)

— Джеймс К,

Працює ідеально! Я використовую bootstrap і якось мій <hr> був незвичним - він був прозорим і не був чітко видно.

17

Це тому, що за замовчуванням CSS Bootstrap для <hr />:

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

це створює розрив у 40 пікселів між цими двома рядками

так що якщо ви хочете змінити якийсь конкретний <hr />стиль полів на своїй сторінці, ви можете спробувати щось на зразок цього:

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

якщо ви хочете змінити зовнішній вигляд / інші стилі будь-якого конкретного <hr /> на вашій сторінці, наприклад, колір, тип межі або товщину, ви можете спробувати щось на зразок:

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

для всіх <hr />на вашій сторінці

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

— Рітабрата Гаутам
джерело

5

За замовчуванням hrелемент у файлі CSS Twitter Bootstrap має верхнє та нижнє поля 18px. Ось що створює розрив. Якщо ви хочете, щоб розрив був меншим, вам потрібно відкоригувати властивість margin hrелемента.

У вашому прикладі зробіть щось подібне:

.container hr {
margin: 2px 0;
}

— плавник
джерело

3

Думаю, було б краще виглядати, якби ми додали border-color: transparent, як показано нижче:

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

Якщо ви не поставите кордон прозорим, він буде білим, і я не думаю, що це добре весь час.

— Asu13
джерело

2

Я зміг налаштувати hrTag, відредагувавши вбудований стиль як такий:

<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 тепер товщі і помітніше; це також темніший сірий колір. Бутстрап-код насправді дуже гнучкий. Як фрагмент демонструє вище, ви можете використовувати вбудований стиль або власний власний код. Сподіваюся, це комусь допомагає.

— Називай мене Енді
джерело

0

Можливо, вам захочеться одне з них, щоб відповідати макету 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>

Без DIVелемента сітки компонування може гальмувати на різних пристроях.

— F8ER
джерело