如何使用bootstrap布局这个重叠的拼写错误

Question

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

我正在使用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;
}