我很难弄清楚如何将整个事物置于中心位置。我正在使用 Twitter Bootstrap 2。
这是我的代码，我确保 .container 位于正确的位置。但是，他们仍然没有对齐。
求助各位？!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home- Argyle's Automobile</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container banner-header">
<h1><a href="#">Argyle's Automobile</a></h1>
</div>
<!--Navbar-->
<div class="navbar">
<div class="container"> <ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Social</a></li>
</ul></div>
</div>
<!--Marketing Area-->
<div class="container"><div class="hero-unit">
<h1>Marketing stuff!</h1>
<br />
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. <br />Fusce dapibus, tellus ac cursus commodo, tortor mauris<br /> condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<br />
<br />
<a href="#" class="btn btn-large btn-success">Get Started</a>
</div></div>
</div>
<!--Content-->
<div id='content' class='container row-fluid'>
<div class="span4">
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit</p>
</div>
<div class="span4">
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit</p>
</div>
<div class="span4">
<h3>Content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit</p>
</div>
</div>
</body>
</html>
最佳答案
将整个 !# 包裹在 div.container 中然后删除多余的关闭 </div>在你的英雄单位。您不需要继续使用 .container在内部 HTML 上，但这样做很好。
这是一个工作示例:
http://plnkr.co/edit/kgfOjyOla6gAEPumLXd2?p=preview
以下是相关的 BootStrap 2 文档:
http://getbootstrap.com/2.3.2/scaffolding.html
关于css - Twitter Bootstrap 对齐中心。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21668540/