Question

我正在尝试创建一个带有导航栏的布局，顶部有两行（第二行再次分为两列......等等）

我尝试使用以下代码来分割页面但与导航栏重叠。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>

    <script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="Content/CSS/bootstrap.css" type="text/css"/>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="Content/CSS/styles.css" type="text/css"/>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <div class="btn-group pull-left">
                    <img src="Content/IMAGES/applications.png" alt="logo" class="dropdown-toggle" data-toggle="dropdown">
                    <ul class="dropdown-menu">
                        <li><a href="#/home/Option">Option</a></li>
                        <li><a href="#/home/Option">Option</a></li>
                        <li><a href="#/home/Option">Option Management</a></li>
                        <li><a href="#/home/Dashboard">Dashboard</a></li>
                    </ul>
                </div>
                <p class="brand">Interface Control Data</p>
                <div class="btn-group pull-right">
                    <p class="username">Username</p>
                    <img class="logout" src="Content/IMAGES/btn_logout.png" alt="logo" class="dropdown-toggle" data-toggle="dropdown">
                    <ul class="dropdown-menu">
                        <li><a href="#/Settings">Settings</a></li>
                        <li><a href="#/KeyboardShortcuts">Keyboard shortcuts</a></li>
                        <li><a href="#/Logout">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <div class="container-fluid" style="height:100%;border:1px solid #aaa;">
        <div class="row-fluid" style="height:100%;border:1px solid #aaa;">
          <div class="span12" style="height:100%;">
                another header
          </div>
        </div>
       <div class="row-fluid" style="height:100%;border:1px solid #aaa;">
         <div class="span6" style="height:100%;">
           <div class="row-fluid" style="height:50%;">
             <div class="span12" style="background:blue;height:100%;">a</div>
           </div>
           <div class="row-fluid" style="height:50%;">
             <div class="span12" style="background:red;height:100%;">b</div>
           </div>
         </div>
         <div class="span6" style="height:100%;">
               Right side
         </div>
       </div>
     </div>
</body>
</html>

CSS文件是

    .logout{
    margin-top: 5px;
    width: 25px;
    height: 25px;
}

.username {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 15px;
  font-weight: 200;
  color: #777777;
}
.navbar-inverse .navbar-inner {
  background-image:url('../IMAGES/topPanel.png');
}

.navbar-fixed-top .container-fluid{
  background-image:url('../IMAGES/topPanel.png');
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
    background-image:url('../IMAGES/topPanel.png');
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-image:url('../IMAGES/topPanel.png');
}

有人可以帮我解释导航栏重叠的原因吗？

Answer 1

使用.navbar-fixed-top要求您将页面填充或边距或填充添加到页面上的下一个元素。来自http://getbootstrap.com/components/#navbar-fixed-top

需要身体填充

固定的导航栏将覆盖您的其他   内容，除非你添加填充到顶部。试试你的   自己的价值观或使用下面的代码段。提示：默认情况下，导航栏是   50px高。

body {padding-top：70px;确保在核心之后包含这个   Bootstrap CSS。

问题是你有一个固定的高度，固定的导航栏从“文档流程”中取出（因为它有固定的定位）所以你需要通过将文档或内容向下推一点来弥补这一点

如何使用bootstrap css获得2行2列的布局，而不重叠

1 个答案: