Question

我很难弄清楚如何将整个事物放在中心位置。我正在使用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>

enter image description here

Answer 1

使用Bootstrap的标记不正确。有关如何构建标记的教程，请参阅Twitter Bootstrap网站。

<div class="row-fluid"></div>

应始终位于<div class="container"></div>

内

http://getbootstrap.com/css/#grid-example-fluid

Answer 2

在div.container中包裹整个！＃然后删除英雄单位中的额外结束</div>。您不需要在内部HTML上继续使用.container，但这样做很好。

这是一个有效的例子：
http://plnkr.co/edit/kgfOjyOla6gAEPumLXd2?p=preview

以下是相关的BootStrap 2文档：
http://getbootstrap.com/2.3.2/scaffolding.html

Twitter Bootstrap Align Center。

2 个答案: