Question

我正在尝试使用bootstrap css为我的应用程序设计布局。

我发现bootstrap非常使用，但在工作时看到了一些问题。

我可以看到侧栏和细节面板之间存在一些差距
侧栏和细节面板的高度不是全屏（实际上它是根据该部门的内容进行调整）。我想要的是一个全尺寸的侧栏和细节面板（什么是碎片大小）。在代码中，我将高度硬编码为高度：900px，但我不想以像素为单位给出高度。

以下是布局的屏幕截图 enter image description here

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html data-ng-app="ICDApp">
<head>
    <title>Documents</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="capital icon" href="Content/IMAGES/capital.png">
    <!--Make sure we always load our CSS last-->
    <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/ICD">ICD</a></li>
                        <li><a href="#/home/Library">Library</a></li>
                        <li><a href="#/home/ProjectMgt">Project 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="row-fluid" style="height:900px;border:1px solid #aaa;margin-left: 0;">
           <div class="span2" style="background: #FF9999;height:100%;padding-left: 30px; padding-right: 30px;">
               Left Panel
           </div>
           <div class="span10" style="height:100%;">
               <div class="row-fluid" style="height:7%;">
                   <div class="span12" style="background:blue;height:100%;">Header Panel</div>
               </div>
               <div class="row-fluid" style="height:93%;">
                   <div class="span12" style="background:red;height:100%;">Details Panel</div>
               </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');
}

body { padding-top: 55px; }

有人可以帮助我吗？

Bootstrap CSS - 左右面板高度不齐，面板之间有间隙

0 个答案: