Question

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Arockiam</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script>   <![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="navbar-inner navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid my-style">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">A ROCK I AM</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>
<!-- container -->

<div class="row-fluid">
    <div class="col-md-3 col-sm-12"><div class="dashboard-item">Column1</div></div>
    <div class="col-md-3 col-sm-12"><div class="dashboard-item">Column1</div></div>
    <div class="col-md-3 col-sm-12"><div class="dashboard-item">Column1</div></div>
    <div class="col-md-3 col-sm-12"><div class="dashboard-item">Column1</div></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

CSS：

body {
margin:0px;
height:0px auto;
}
.body-wrapper
{
margin-bottom:10px;
padding:0px;
background-color:#000;
}
.dashboard-item 
{
margin-top:10px;
margin-bottom:10px;
padding:5px;
min-height:200px;
border:1px solid #CCC;
border-radius:5px;
background-color:#FFF;
box-shadow:inset 0px 0px 20px #CCC;
}
.footer
{
margin:0px;
padding:15px;
bottom:0px;
position:fixed;
width:100%;
width:100%;
height:50px;
color:#000;
background-color:#CCC;
}

我正在尝试实现基于网格的布局。我尝试了也得到了这个但是在网格之后获得了空白区域，这创建了一个垂直滚动条。我没有除页面中的网格之外的任何内容....请帮助。 This is the Screenshot...

Answer 1

navbar-fixed-top.css有这一行CSS：

body {min-height: 2000px; padding-top: 70px;}

摆脱那个最小高度。

source

如何删除Bootstrap 3中出现的空白区域？

1 个答案: