Question

这是我的代码：

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

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

hr标签似乎没有像我期望的那样工作。它不是画线，而是创造一个间隙，如下所示：

Answer 1

<hr>的css属性为：

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'>（使用相应的结束标记）。

如果您期望有不同的内容，请通过添加评论来描述您的期望。

Answer 2

我通过将HR背景颜色设置为黑色来解决这个问题：

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

Answer 3

而不是写

<hr>

写

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

它将正常显示全宽。

Answer 4

这是因为<hr />的Bootstrap的 DEFAULT CSS 是::

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>

Answer 5

默认情况下，Twitter Bootstrap CSS文件中的hr元素的上下边距为18px。这就是创造差距的原因。如果您希望间隙更小，则需要调整hr元素的边距属性。

在您的示例中，执行以下操作：

.container hr {
margin: 2px 0;
}

Answer 6

我可以通过编辑内联样式来自定义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现在更厚更明显;它也是深灰色。引导代码实际上非常灵活。如上面的代码片段所示，您可以使用内联样式或自己的自定义代码。希望这有助于某人。

Answer 7

我认为如果我们添加border-color：透明会更好看，如下所示：

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

如果你没有把边框透明，它会是白色的，我认为这不是一直都好。

Answer 8

您可能需要其中之一，以便与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网格元素，布局可能会在不同设备上制动。

Twitter Bootstrap中的<hr />标记无法正常运行？

8 个答案: