css - 应用 Bootstrap 时标题后面的双线停止工作

Question

stack overflow 社区帮助我弄清楚了如何在我的网站上的章节标题后面添加两条不同大小的线。该方法可以在这个 JS Fiddle 中查看:http://jsfiddle.net/dCZR4/1/

它工作正常，直到我将 Twitter Bootstrap 3.0 CSS 包含在我的布局中。现在，两条线出现在彼此的顶部，在文本后面形成一条粗线。这可以在这里看到:http://onedirectionconnection.com/tester/

如果有人可以就导致此打嗝的原因向我提出建议，我们将不胜感激。

标题的 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>

(在JSFiddle中，它被简单地定义为h1，但我在我的布局中改变了它)

在此先感谢您提供的任何帮助!

Answer 1

Bootstrap 默认应用 box-sizing: border-box。

您需要将其重置为 box-sizing:content-box 以满足此特定要求。

.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 */
}