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


93

这是我的代码:

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

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

hr标签似乎没有按我期望的那样工作。与其画一条线,不如画一条线,就像这样:

在此处输入图片说明

Answers:


140

的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
谢谢!没意识到您必须在<div>内包含<hr>。奇。
凯尔·卡尔森

3
我假设在过去两年中某个时候span12已从Bootstrap中删除,因为我没有,但是将我的身体内容和水平尺放在行类中对我来说很有效。
凯西2014年

1
border-color: #EEEEEE -moz-use-text-color #FFFFFF;仅修复border-color: #EEEEEE;
Slowaways 2015年

2
span12已由col-sm-12取代
M_Griffiths

您的代码的这一部分(border-width: 1px 0;)会导致一条2px水平线!您应该将其更改为: border-width: 1px 0 0 0;制作一条1px水平线。
RAM

39

而不是写

<hr>

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

它将正常显示全宽。


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

这是Bootstrap的最优雅的解决方案,谢谢!
Christopher Bales

<hr class="w-100">设置宽度似乎是不言而喻的方法。
Robobenklein

38

我通过将HR背景色设置为黑色来解决此问题,如下所示:

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

4
这并不能完全解决问题,更像是hack……与内联样式相比,有很多更好的方法可以替代bootstrap样式。
IonicBurger

1
请详细说明@DjangoBurger并分享您的解决方案。
James K

1
我认为@DjangoBurger主要抱怨内联样式。您可以将这种样式放在类中,然后在此处分配类名。我以自己的方式修改了您的解决方案,谢谢您!
dreamerkumar

同意-这是一个优雅的补救方法:)
James K

完美的作品!我正在使用引导程序,因此我的<hr>很不寻常-它是透明的,看不清。

17

这是因为Bootstrap的DEFAULT 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>

5

默认情况下,hrTwitter Bootstrap CSS文件中的元素的上下边界为18px。那就是造成差距的原因。如果要缩小间隙,则需要调整hr元素的margin属性。

在您的示例中,执行以下操作:

.container hr {
margin: 2px 0;
}

3

我认为如果我们按如下所示添加border-color:transparent会更好:

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

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


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现在更厚且更可见;它也是较深的灰色。引导代码实际上非常灵活。如上面的代码片段所示,您可以使用内联样式或自己的自定义代码。希望这对某人有帮助。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.