Question

堆栈溢出社区帮助我弄清楚如何在我的网站标题后面添加两个不同大小的行。该方法可以在这个JS小提琴中查看：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 */
}

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

1 个答案: