Question

我目前正在尝试在网站开发中使用Bootstrap，但似乎容器类，它应该使内容居中不起作用。我似乎无法找到问题，为什么它不起作用。我尝试了另一种文本编辑器并再次下载了引导程序，但没有任何反应。我正在使用的文本编辑器是Sublime text 2.

感谢您的帮助！：）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sample One</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />
</head>
<body class="container">
    <header class="row">
        <hgroup class="span8">
            <h1><a href="img/logo.png" title="Visit website"></a></h1>
            <h2>Sample website design</h2>
        </hgroup>
        <nav class="span4">
            <ul>
                <li><a href="" title="About">About Us</a></li>
                <li><a href="" title="Work">Our Work</a></li>
                <li><a href="" title="Contact">Contact Us</a></li>
            </ul>
        </nav>
    </header>
    <section role="main">
        <h1>About</h1>
        <ul>
            <li><a href="" title="Facebook">Facebook</a></li>
            <li><a href="" title="Twitter">Twitter</a></li>
        </ul>
        <img alt="bg" src=""> 
        <article>
            <h1>Title of the article</h1>
            <p>Sony has revealed lifetime sales of the PS3 has passed another milestone, and announced 300 new games are coming this Christmas.</p>
        </article>
        <section>
            <h1>Portfolio</h1>
            <ul>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
            </ul>
        </section>
        <article>
            <h1>Contact</h1>
            <p>Sony has revealed lifetime sales of the PS3 has passed another milestone, and announced 300 new games are coming this Christmas.</p>
        </article>
    </section>
    <footer class="row">
        <small class="span8">&copy; 2013 All Right Reserved. Designed by Renz</small>
    </footer>
</body>
</html>

Answer 1

通常，您将所有内容都包含在<div class="container">中，而不是将该类应用于<body>。像这样：

body
  -> .container
     -> .row
        -> .span6
           -> Your content
        -> .span6
           -> More content
     -> .row etc.

Answer 2

不要将.container放在body上，而是将内容包装在DIV中，然后在该DIV上应用容器类。

Answer 3

没有人必须提供容器类但是，您必须对容器使用新元素例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sample One</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    <header class="row">
        <hgroup class="span8">
            <h1><a href="img/logo.png" title="Visit website"></a></h1>
            <h2>Sample website design</h2>
        </hgroup>
        <nav class="span4">
            <ul>
                <li><a href="" title="About">About Us</a></li>
                <li><a href="" title="Work">Our Work</a></li>
                <li><a href="" title="Contact">Contact Us</a></li>
            </ul>
        </nav>
    </header>
    <section role="main">
        <h1>About</h1>
        <ul>
            <li><a href="" title="Facebook">Facebook</a></li>
            <li><a href="" title="Twitter">Twitter</a></li>
        </ul>
        <img alt="bg" src=""> 
        <article>
            <h1>Title of the article</h1>
            <p>Sony has revealed lifetime sales of the PS3 has passed another milestone, and announced 300 new games are coming this Christmas.</p>
        </article>
        <section>
            <h1>Portfolio</h1>
            <ul>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
            </ul>
        </section>
        <article>
            <h1>Contact</h1>
            <p>Sony has revealed lifetime sales of the PS3 has passed another milestone, and announced 300 new games are coming this Christmas.</p>
        </article>
    </section>
    <footer class="row">
        <small class="span8">&copy; 2013 All Right Reserved. Designed by Renz</small>
    </footer>
</div>
</body>
</html>

Answer 4

这已在3x中更改：.col-md- *而不是span * as：

<header class="row"> <hgroup class="col-md-8">

Bootstrap容器类不起作用

4 个答案: