如何使用引导程序布局这个重叠的错字

Question

我目前正在处理此 Sketch 画板中显示的布局。

我正在使用 Twitter Bootstrap，我不确定这是否可以实现。我喜欢将绿色框与采用不同视口的响应式引导网格对齐。同时，还应使用引导网格系统将 Typo 放置在顶部。

有人知道吗？

提前谢谢...

Answer 1

查看此演示：https://jsfiddle.net/DTcHh/37491/

你想要这样吗？它也适用于响应式。 只需在绿色框中为您的文本提供负边距。 不要忘记为您的标题留一些空间，不要为绿色框占用全宽。

HTML

<div class="container">
    <div id="feature" class="row">
        <div class="pull-right bg-green">
            <h2>Featured Project</h2>
            <p>Lorem Ipsum<br>Lookbook</p>
        </div>
    </div>
</div>

CSS

#feature {
    padding: 100px 0 0 100px;
}
#feature h2, #feature p{
    margin-left:-100px;
}
.bg-green {
    background: green;
    padding:40px;
    width:90%;
    height:500px;
}