带有引导程序的 HTML5 布局答案

【问题标题】：HTML5 Layout with Bootstrap带有引导程序的 HTML5 布局
【发布时间】：2019-02-21 06:28:42
【问题描述】：

我需要使用 Bootstrap 3.x 编写这样的布局

但我不知道如何创建具有多列大小的部分（在本例中为主要和文章），而不会出现与关闭元素相关的标记错误。

以下代码在语法上是正确的，但它不尊重布局（col-md-4 在新行中）

  <body>
  <header>
  	<!-- menu -->
  </header>

  	<div class="container">
	  <main>
		<article>
			<div class="row">
	  			<div class="col-md-12">
			 		<h1>Hello, world!</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-md-8">
				  	<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Etc., etc.</p>
				</div>
			</div>
		</article>
	  </main>
	  	<div class="row">
			<aside class="col-md-4">
			  		<p>Lorem ipsum</p>
			</aside>
		</div>

		<div class="row">
			<footer class="col-md-12">
	  			<p>Lorem ipsum</p>
	  		</footer>

	</div><!-- container -->
  	
  </body>
</html>

你有什么建议？

谢谢

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

“绿色”列，.col-md-4 应该是“橙色”列 .col-md-8 的同级。它们需要具有相同的 .row 父级。换句话说，它们应该彼此相邻，这样这些部分就不会中断。以下是我的做法：

<header>
 <div class="container">
  <div class="row">
   <div class="col-md-12">header</div>
  </div>
 </div>
</header>

<main>
 <div class="container">
  <div class="row">
    <div class="col-md-12">orange section</div>
  </div>

  <div class="row">
    <div class="col-md-12">orange section</div>
    <div class="col-md-12">green section</div>
  </div>
 </div>
</main>

<footer>
 <div class="container">
  <div class="row">
    <div class="col-md-12">footer</div>
  </div>
 </div>
</footer>

【讨论】：

是的，但是我们需要在主要元素和文章元素（橙色栏）之外有一个旁白（绿色栏）