带Bootstrap的HTML5布局

Question

我需要使用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>

你有什么建议？

谢谢

Answer 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>

带Bootstrap的HTML5布局

问题描述投票：0回答：1

1个回答

最新问题

带Bootstrap的HTML5布局

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1