Bootstrap 3 行和 css :before 属性

Question

请看这个fiddle：

:before css 属性似乎不适用于 bootstrap 行。

在上面的示例中，一条居中的红线应该显示在 div 和 class myline.

的背景中

Answer 1

改为将你的 :after pseudo class 应用于此规则（在 col-xs-12 之后）：

<div class="row myline">
        <div class="col-xs-12 myline">
            <p>A red line should appear in the background of this row</p>
            <p>The line should span from the top of the row...</p>
            <p>... till here. Why is there no line?</p>
        </div>
    </div>

LIVE DEMO

或者只需添加一个高度值即可正常工作：

.myline:before {
    content: '';
    top: 0;
    bottom: 0;
    position: absolute;    
    width: 4px;
    background-color: red;
    left: 50%;
    margin-left: -1.5px;
    height: 100px;
}

Live Demo

Bootstrap 3 行和 css :before 属性

Bootstrap 3 rows and css :before property

css

twitter-bootstrap-3