Тег <hr> в Twitter Загрузочный лоток не работает правильно?

Вот мой код:

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

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

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

enter image description here

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Это связано с тем, что Bootstrap DEFAULT CSS для <hr /> is::

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

он создает 40px-разрыв между этими двумя строками

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

Ответ 4

Вместо записи

<hr>

Запись

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

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

Ответ 5

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

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

.container hr {
margin: 2px 0;
}

Ответ 6

Я думаю, что будет выглядеть лучше, если мы добавим border-color: прозрачный, как показано ниже:

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

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

Ответ 7

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