html - 3 列布局，但 1 在 2 下

Question

我该怎么做这样的事情？http://jsfiddle.net/BxaNN/369/ 但顶栏在中心顶部？注意：这不是我的代码

<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2></h2>
<p></p>
</div>

<div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
<h2></h2>
<p></p>
</div>

<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2></h2>
<p></p>
</div>
</div>
</div>    

标签： htmlcss

Answer 1

您已经为您完成了这些引导类。您只需要引用引导 cdn。您也可以将文本居中以使其美观。在此处查看网格系统：引导资源

.container {
text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2>1</h2>
<p>1</p>
</div>

<div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
<h2>2</h2>
<p>2</p>
</div>

<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2>3</h2>
<p>4</p>
</div>
</div>
</div>