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

Вот мой код:

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

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

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

свойство 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'>(соответствующими закрывающими тегами).

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

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

<hr>

Напишите

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

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

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

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

Это потому, что 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>

По умолчанию hrэлемент в CSS-файле Twitter Bootstrap имеет верхнее и нижнее поля 18px. Вот что создает разрыв. Если вы хотите, чтобы зазор был меньше, вам нужно отрегулировать свойство поля hrэлемента.

В вашем примере сделайте что-то вроде этого:

.container hr {
margin: 2px 0;
}

Я думаю, было бы лучше, если бы мы добавили border-color: transparent, как показано ниже:

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

Если вы не сделаете границу прозрачной, она будет белой, и я не думаю, что это всегда хорошо.

Я смог настроить 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 стал толще и заметнее; это также более темный серый цвет. Код начальной загрузки на самом деле очень гибкий. Как показано во фрагменте выше, вы можете использовать встроенный стиль или свой собственный код. Надеюсь, это кому-то поможет.

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