Twitter Bootstrap中的<hr>标签无法正常运行？
Hen*_*son 89 twitter-bootstrap
这是我的代码:
<div class="container">
<div>
<h1>Welcome TeamName1</h1>
asdf
<hr>
asdf
</div>
</div> <!-- /container -->
hr标签似乎不像我期望的那样工作.它不是画线,而是创造一个间隙,如下所示:
bap*_*tme 136
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'>(使用相应的结束标记).
如果您期望不同的东西,请通过添加评论来描述您的期望.
- 谢谢!没意识到你必须在<div>中包含<hr>.奇. (3认同)
- 我假设在过去的两年中某个时刻已经从Bootstrap中删除了span12,因为我没有它,但是将我的正文内容和横向规则都放在行类中对我有用. (3认同)
- span12已被col-sm-12取代 (2认同)
Jam*_*s K 35
我通过将HR背景颜色设置为黑色来解决这个问题:
<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
- 这并不能完全解决这个问题,更像是一个黑客......有一些更好的方法来覆盖引导样式而不是内联样式. (4认同)
小智 31
而不是写作
<hr>
写
<hr class="col-xs-12">
并且它将正常显示全宽.
- `<div class ="w-100"> <hr> </ div>` (3认同)
Rit*_*tam 15
这是因为Bootstrap的DEFAULT CSS for <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>
默认情况下,hrTwitter Bootstrap CSS文件中的元素具有顶部和底部边距18px.这就是创造差距的原因.如果您希望间隙更小,则需要调整hr元素的margin属性.
在您的示例中,执行以下操作:
.container hr {
margin: 2px 0;
}