95

这是我的代码：

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

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

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

在此处输入图像描述

4

8 回答 8

144

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

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

于 2012-07-20T13:42:36.523 回答
43

而不是写

<hr>

写

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

它将正常显示全宽。

于 2017-04-21T03:58:39.953 回答
41

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

<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
于 2015-04-03T08:19:58.133 回答
17

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

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>
于 2015-09-05T15:10:19.507 回答
5

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

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

.container hr {
margin: 2px 0;
}
于 2013-05-17T09:26:32.907 回答
3

我认为如果我们添加边框颜色会更好看：透明如下：

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

如果您不使边框透明，它将是白色的，我认为这一直都不好。

于 2016-11-17T12:25:20.647 回答
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 现在更厚更显眼了；它也是一种较深的灰色。引导代码实际上非常灵活。正如上面的代码片段所示，您可以使用内联样式或您自己的自定义代码。希望这可以帮助某人。

于 2016-11-22T02:49:02.647 回答
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网格元素，布局可能会在不同的设备上停止。

于 2020-09-05T07:44:12.030 回答