移动平台上 jumbotron 后出现意外空白答案

【问题标题】：Unexpected whitespace after jumbotron on mobile platforms移动平台上 jumbotron 后出现意外空白
【发布时间】：2015-11-08 08:17:16
【问题描述】：

参见：voiddevelopment.com

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Test Website</title>
<meta name="viewport" content="width=device-width,, maximum-scale=1, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">&lt;Void&gt;</a>
        </div>
        <div class="collapse navbar-collapse" id="menuCollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Purchase</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="search" />
                </div>
                <button type="submit"><span class="glyphicon glyphicon-search"></span></button>
            </form>
        </div>
    </div>
</nav>

<div class="jumbotron">
    <div class="container-fluid push-spaces">

    </div>
</div>

<div class="supporting">
    <div class="container-fluid" style="alignment: top;">
        <div class="col">
            <span class="glyphicon glyphicon-eye-open"></span>
            <h3>Professional Design</h3>
            <br />
            <p>Work with us to create the website design of your dreams.</p>
        </div>
        <div class="col">
            <span class="glyphicon glyphicon-console"></span>
            <h3>Great Functionality</h3>
            <br />
        </div>
        <div class="col">
            <span class="glyphicon glyphicon-tags"></span>
            <h3>Order Now</h3>
            <br />
        </div>
    </div>
</div>

CSS：

.jumbotron{
    background: url("jumbotron.jpg") no-repeat center top;
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    -o-background-size: 70%;
    background-size: 70%;
    margin-top: 0 auto;
}
.push-spaces {
    height: 550px;
}
.supporting {
    padding-top: 80px;
    padding-bottom: 100px;
}

.supporting .col {
    float: left;
    width: 33%;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

.supporting .glyphicon {
    font-size: 4em;
}

.supporting .col h3 {
    font-weight: bold;
}

在所有移动平台上，jumbotron 图像和支持内容之间都会出现奇怪的空白。这很奇怪，因为我没有添加任何内容。也许一些 CSS 标签来拉出支持的内容？

【问题讨论】：

标签： html css image twitter-bootstrap responsive-design

【解决方案1】：

这最终成为了解决方案：

<img src="jumbotron.jpg" class="img-responsive" style="margin-left: 10%; margin-right: 10%; width: 80%;">

刚刚将 jumbotron 更改为图像。意识到无论如何我都不需要文本。

【讨论】：

【解决方案2】：

你有一个名为 .push-spaces 的 div 高 550px，这是一个容器流体类，它的边距为 0 auto 它会导致空白。

【讨论】：

它们包含在 jumbotron 中
所以我应该覆盖 push-spaces 类中的边距？
你那里为什么有容器？
我要解决的主要问题是让 jumbotron 背景图像像“ " 但是我可以在上面写一些东西。
它最终会破坏图像的纵横比，以不同的速率改变高度和宽度。图像最终看起来质量很差。