bootstrap顶部导航栏遮挡住内容的解决办法

使用bootstrap并将顶部导航栏固定时，顶部导航栏的写法：

<!-- 导航栏 -->
<div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">计算机科学</a>
            </div>
            <div>
                <ul class="nav navbar-nav">

                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            编程语言 <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Java</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Python</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            数据库 <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Oracle</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

但这样一来，很有可能将底下的内容给遮挡住一部分。
解决办法是将body的上边距设置稍大一些，加入代码：

<style type="text/css">
        body{
            margin-top: 60px;
        }
    </style>