0

堆栈溢出社区帮助我弄清楚如何在我的网站上的部分标题后面添加两条不同大小的行。该方法可以在这个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，但我在布局中更改了它）

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

4

1 回答 1

0

Bootstrapbox-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 */
}
于 2013-10-06T19:09:06.047 回答