Twitter中的<hr>标签引导程序无法正常运行？
这是我的代码：
<div class="container"> <div> <h1>Welcome TeamName1</h1> asdf <hr> asdf </div> </div> <!-- /container --> hr标签似乎并没有像我期望的那样工作。 它不是画一条线，而是画一条缝隙，就像这样：
<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>为全angular，请将<div>replace为<div class='row'><div class='span12'> （使用结束标签）。
如果您期望有所不同，请通过添加评论来描述您的期望。
我通过将HR背景颜色设置为黑色来解决此问题，如下所示：
<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
这是因为Bootstrap的<hr />的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 />外观/其他样式，如颜色和边框types或厚度，可以尝试如下所示：
<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>
而不是写作
<hr>
写
<hr class="col-xs-12">
它将显示正常的全宽。
默认情况下，Twitter Bootstrap CSS文件中的hr元素具有18px的顶部和底部边距。 这是造成差距。 如果你希望差距更小，你需要调整hr元素的margin属性。
在你的例子中，做这样的事情：
.container hr { margin: 2px 0; }
我认为如果我们添加边框颜色，透明效果会更好：
<hr style="width: 100%; background-color: black; height: 1px; border-color : transparent;" />
如果你不把边界透明的话，它会是白色的，我不认为这是好的。
我可以通过编辑内联样式来自定义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现在更厚更清晰。 这也是一个灰暗的颜色。 引导代码实际上非常灵活。 如上面的代码片段所示，您可以使用内联样式或自定义代码。 希望这有助于某人。
