使用bootstrap Container类

时间:2017-02-28 01:33:12

标签: html css twitter-bootstrap

我正在尝试制作以下HTML布局

Required Layout

如您所见,我有2行,第1行中的内容在Bootstrap Container类中缩进。在第2行中,我有2列分别具有背景颜色和图像,它们跨越整个屏幕。但是,它们中的文本再次缩进,类似于第1行中的内容。附加我尝试过的代码。

<div class="container" style="background: bisque;">
    <div class="row">
        <div class="col-xs-12">
            <h1>Normal Boxed Width</h1>
        </div>
    </div>
</div>
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-6" style="background-color:lavender;">
			<div class="row"	>
				<div class="container">
					<h1>Left Panel</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
				</div>
			</div>
		</div>
		<div class="col-sm-6" style="background-color:aliceblue;">
			<h1>Right Panel</h1>
		</div>
	</div>
</div>

我也试过这个link提供的解决方案,但这似乎不是正确的方法。如何实现上图所示的布局?

0 个答案:

没有答案