无法查看标题div下方的任何内容

时间:2013-02-23 13:16:55

标签: html css twitter-bootstrap

screenshot

我不知道为什么我无法查看导航栏下面的内容。我得到的所有内容都是空白的<h1>Hello</h1>。特别感谢对此代码的一些指导,以及任何有关如何在将来避免此问题的更多信息。

<!DOCTYPE html>
<html>
<head>
    <title>A random title piece.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../static/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="../static/style.css" rel="stylesheet" media="screen">

</head>
<body>

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container pull-left">
<a class="brand" href="../">Things and Stuff </a>
                <div class="nav-collapse collapse" id="main-menu">
                    <ul class="nav" id="main-menu-left">
                        <li class="divider-vertical"></li>
                        <li>
                            <form class="form-search">
                                <div class="input-    append">
                                    <input     type="text" class="span2 search-query">
                                    <button type="submit" class="btn">
                                        Search
                                    </button>
                                </div>
                            </form>
                        </li>
                        <li>
                            <a id="swatch-link" href="../popular">Example 1</a>
                        </li>
                        <li>
                            <a id="swatch-link" href="../sold">Example 2</a>
                        </li>
                        <li>
                            <a id="swatch-link" href="../new">Example 3</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

<h1>Hello</h1>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/json2.js"></script>


</body>

1 个答案:

答案 0 :(得分:1)

内容隐藏在标题下方。使用带有类容器的div包装您的内容,然后告诉我们 Here is a jsfiddle
Jsfiddle with padding

<div class=".container">
  <h1>Hellow world</h1>
</div>

在你的css中添加以下内容

.container > h1
 {
margin-top:70px;

 }  

或者您可以使用以下内容,我建议使用以下内容:

.container > h1{
   padding-top:70px;
 }