Тег <hr> в Twitter Bootstrap работает некорректно?

94

Вот мой код:

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

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

Тег hr, похоже, не работает так, как я ожидал. Вместо того, чтобы рисовать линию, он создает разрыв, например:

twitter-bootstrap

— Генри Хенринсон
источник

141

свойство 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;
}

Это соответствует горизонтальной линии 1px с очень светло-серым и вертикальным полем 18px.

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

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

Если вы ожидаете чего-то другого, опишите, что вы ожидаете, добавив комментарий.

— крестить
источник

3

Благодарность! Не понимал, что вам нужно включить <hr> внутри <div>. Странный.

— Кайл Карлсон

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

42

Вместо того, чтобы писать

<hr>

Напишите

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

И он будет отображать полную ширину как обычно.

— Горячий котелок
источник

6

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

— drzymala

Это самое элегантное решение для Bootstrap, спасибо!

— Кристофер

<hr class="w-100">кажется более очевидным методом установки ширины.

— Robobenklein

40

Я решил это, установив черный цвет фона HR следующим образом:

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

— Джеймс К
источник

4

Это не совсем решает проблему, больше похоже на хакерство ... Есть много более эффективных способов обойти стиль начальной загрузки, чем встроенный стиль.

— IonicBurger

1

Пожалуйста, доработайте @DjangoBurger и поделитесь своим решением.

— Джеймс К.

1

Я думаю, что @DjangoBurger в основном жалуется на встроенные стили. Вы могли бы поместить этот стиль в класс и назначить здесь имя класса. Я изменил ваше решение таким образом для себя, так что спасибо!

— dreamerkumar

Согласен - это элегантное средство :)

— Джеймс К.

Прекрасно работает! Я использую бутстрап, и почему-то мой <hr> был необычным - он был прозрачным и нечетким.

17

Это потому, что CSS DEFAULT для 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. Вот что создает разрыв. Если вы хотите, чтобы зазор был меньше, вам нужно отрегулировать свойство поля 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
источник