Css 应用引导时，收割台后面的双线停止工作

stack overflow社区帮助我了解了如何在我的网站上的部分标题后面添加两条不同大小的行。可以在此JS FIDLE中查看该方法：

在我将Twitter Bootstrap 3.0 CSS包含在布局中之前，它一直工作正常。现在，这两行出现在彼此的正上方，在文本后面形成一条粗线。这可以在这里看到：

如果有人能告诉我是什么导致了这个打嗝，我将不胜感激

标题的CSS如下所示：

.section-title{
    font-family: 'Lato', 'Asap','Quicksand', 'Droid Sans', sans-serif;
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-transform: uppercase;
    text-align: center;
}

.section-title:before, .section-title:after {
    position: absolute;
    top: 40%;
    overflow: hidden;
    width: 50%;
    height: 4px;
    content: '\a0';
    border-bottom: 3px solid #DA5969;
    border-top: 1px solid #DA5969;
}
.section-title:before {
    margin-left: -52%;
    text-align: right;
}
.section-title:after {
    margin-left:2%;
    text-align:left;
}

HTML是：

<div class="section-title">Title Goes Here</div>

标题在这里

（在JSFIDLE中，它被简单地定义为h1，但我在布局中更改了它）

---

提前感谢您提供的任何帮助

引导默认情况下应用

框大小：边框框

对于此特定要求，您需要将其重置为

框大小：内容框

.section-title:before, .section-title:after {
position: absolute;
top: 40%;
overflow: hidden;
width: 50%;
height: 4px;
content: '\a0';
border-bottom: 3px solid #DA5969;
border-top: 1px solid #DA5969;
box-sizing: content-box; /* + vendor specific versions here */
}

---

非常感谢。这就解决了！