0

我目前正在网站开发中尝试 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>
4

4 回答 4

3

通常，您会将所有内容包装在 中<div class="container">，而不是通过将类应用于<body>. 像这样：

body
  -> .container
     -> .row
        -> .span6
           -> Your content
        -> .span6
           -> More content
     -> .row etc.
于 2013-11-06T14:29:08.910 回答
2

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

于 2013-11-06T14:28:41.533 回答
0

没有主体必须给出容器的类，但是，您必须在容器示例中使用新元素：

<!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>
于 2013-11-06T14:34:07.177 回答
-1

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

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

于 2014-03-25T17:51:58.910 回答