插入中断标记会导致页面中出现不需要的 space

Question

我正在使用 Bootstrap FlatUI 框架制作网站，我发现发生了一些奇怪的事情。当我在导航栏后使用 <br> 标签时，它会出现这个奇怪的白色框。

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CS:GO - Premium Betting</title>
    <meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>

    <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="dist/css/vendor/bootstrap.min.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="dist/css/flat-ui.min.css" rel="stylesheet">
    <link href="docs/assets/css/demo.css" rel="stylesheet">

    <link rel="shortcut icon" href="img/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="dist/js/vendor/html5shiv.js"></script>
      <script src="dist/js/vendor/respond.min.js"></script>
    <![endif]-->

        <style>
        html {
                background-color: #485B6E;
        }
        .logo {
                width: 300px;
        }
        .navbar {
                height: 90px;
        }
        .navbar-nav {
                margin-top: 35px;
        }
        .place {
                height: 32px;
                background-color: #ecf0f1;
        }
        </style>

  </head>
  <body>

                <nav class="navbar navbar-inverse navbar-fixed-top">
                        <div class="container">
                          <div class="container-fluid">
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <div class="navbar-header">
                                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="glyphicon glyphicon-tasks"></span>
                                  </button>
                                  <a class="navbar-brand" href="#"><img class="logo" src="img/home/main_logo_complete.png"></a>
                                </div>

                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                  <ul class="nav navbar-nav navbar-right" style="a{text-transform: uppercase;}">
                                        <li><a href="#">HOW TO PLAY</a></li>
                                        <li><a href="#">SUPPORT</a></li>
                                        <li><a href="#"><img src="img/icons/sits_small.png"></a></li>
                                  </ul>
                                </div><!-- /.navbar-collapse -->
                          </div><!-- /.container-fluid -->
                  </div>
                </nav>

        <br><br>

        <div class="place"></div>

        <br><br>

        <div class="container">
                <p>Hello</p>
        </div>


    <script src="dist/js/vendor/jquery.min.js"></script>
    <script src="dist/js/flat-ui.min.js"></script>
    <script src="docs/assets/js/application.js"></script>

  </body>
</html>

图片：

Answer 1

那不是 "weird white box"。这是您网站的主体颜色，通过您的内容不在具有不同颜色背景的元素内显示。您可以消除中断，在 div 中添加一些填充（将其推到导航栏下方）并看到基本相同的内容。

.place {
    ...
    padding-top: 150px;
    overflow: hidden;
}

Demo

插入中断标记会导致页面中出现不需要的 space

Inserting break tag causes unwanted space in the page

html

twitter-bootstrap

flatui