Question

所以它似乎是一个典型的问题，但我还没能删除那个在移动视图中完全破坏我的网页的血腥空白。

我试图逐个删除每个元素以查看发生了什么，但我无法看到它。

HTML code：

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1">
    <!--Boostrap jQuery-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
    <!--Boostrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
    <!--Favicon-->
    <link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
    <!--Mi CSS-->
    <link rel="stylesheet" type="text/css" href="estilo.css">

    <title> TRAMA & DRAMA | Vestuario y producción</title>
</head>

<body>


    <!-- navbar -->
    <nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
            <span class="sr-only">Navegación</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">¿Quiénes somos?</a></li>
                    <li><a href="#">¿Qué hacemos?</a></li>
                    <li>
                        <a href="#"><img id="logo" src="media/logo-menu.png" alt=""></a>
                    </li>
                    <li><a href="#">Nuestros proyectos</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--fin del navbar-->

    <!--Barra rosa única del navbar-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa-nav"></div>
        </div>
    </div>

    <!--Sldeshow -->
    <div class="container-fluid">
        <div class="row ">
            <div id="pasion-div">
                <div class="text-center">
                    <h1 id="pasion-texto">Pasión por el vestuario</h1>
                </div>
            </div>
        </div>
    </div>

    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa"></div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 text-center img-responsive" id="id-quienes">
                <img id="img-vestido" src="media/vestido.png" alt="Vestido">
            </div>
        </div>
    </div>

    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa"></div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center fuente-sans" id="hacemos">
                <h1>¿Qué hacemos?</h1>
            </div>
        </div>
        <br>
        <div class="row text-center fuente-merri">
            <div class="col-sm-4">
                <img src="media/icono-renta.png" alt="">
                <p class="hacemos-headers"><b>Renta de vestuario</b></p>
                <!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
            </div>
            <div class="col-sm-4">
                <img src="media/icono-coordinacion.png" alt="">
                <p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
            </div>
            <div class="row">
                <img src="media/icono-diseno.png" alt="">
                <p class="hacemos-headers"><b>Diseño de vestuario</b></p>
            </div>
        </div>
        <div class="row text-center fuente-merri">
            <div class="col-sm-4">
                <img src="media/icono-espacios.png" alt="">
                <p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
            </div>
            <div class="col-sm-4">
                <img src="media/icono-realizacion.png" alt="">
                <p class="hacemos-headers"><b>Realización</b></p>
            </div>
            <div class="row">
                <img src="media/icono-mantenimiento.png" alt="">
                <p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
            </div>
        </div>
    </div>

    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa"></div>
        </div>
    </div>


    <div id="proyectos">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center fuente-sans">
                    <h1>Nuestros proyectos</h1>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-12 text-center fuente-merri">
                    <p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
                </div>
            </div>
            <br>
            <div class="row text-center fuente-sans">
                <div class="col-sm-4">
                    <img src="media/circ-1.png" alt="">
                    <h4>Diseño de vestuario</h4>
                </div>
                <div class="col-sm-4">
                    <img src="media/circ-2.png" alt="">
                    <h4>Producción y coordinación de vestuario</h4>
                </div>
                <div class="col-sm-4">
                    <img src="media/circ-3.png" alt="">
                    <h4>Renta de vestuario</h4>
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <div class="row text-center fuente-sans">
                <div class="col-sm-6">
                    <img src="media/circ-4.png" alt="">
                    <h4>Servicio social</h4>
                </div>
                <div class="col-sm-6">
                    <img src="media/circ-5.png" alt="">
                    <h4>Actividades del mes</h4>
                </div>
            </div>
        </div>
    </div>


    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa"></div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center fuente-sans">
                <h1>Contacto</h1>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-sm-12 text-center fuente-merri">
                <div id="contacto-desc">
                    <p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
                </div>
            </div>
        </div>
        <div class="row text-center">
            <form role="form">
                <div class="form-group">
                    <input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
                </div>
                <div class="form-group">
                    <input type="email" name="" value="" placeholder="Correo electrónico">
                </div>
                <div class="form-group">
                    <input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
                </div>
                <button type="button" class="btn btn-primary">ENVIAR</button>
            </form>
        </div>
        <br>
        <div class="row text-center fuente-merri">
            <p class="ch">Teléfonos</p>
            <p class="cs">044 55 5601 1231</p>
            <br>
            <p class="ch">Correo eletrónico</p>
            <p class="cs">info@tramaydrama.mx</p>
            <br>
            <p class="ch">Dirección</p>
            <p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
        </div>
    </div>
    <br>
    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa-negra"></div>
        </div>
    </div>

    <!--Footer-->
    <footer>
        <div class="container">
            <div class="row fuente-sans">
                <div class="col-sm-12 text-center" id="futer">
                    <a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
                    <img src="media/icono-inst.png" alt="Instagram">
                    <img src="media/icono-vimeo.png" alt="vimeo">
                    <p id="copyrights">Copyright Trama & Drama 2016 &copy;. Todos los derechos reservados | Página web por <a target="_blank"
                            href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
                </div>
            </div>
        </div>
    </footer>

    <!--Bootstrap jQuery-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

</body>

</html>

CSS代码：

/*Fuentes*/
@import 'https://fonts.googleapis.com/css?family=Lora:700i'; /*Header*/
@import 'https://fonts.googleapis.com/css?family=Merriweather'; /*Títulos*/
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; /*Subtítulos*/


body{
    padding-top: 70px;
    overflow: hidden 
}

footer{
    background-color: #B7254E;
    color: white;
}

/*Los botones dentro de una font: ;ma*/
form > button{
    width: 50%;
    background-color: #5A1741 !important;
    text-align: left !important;
}

/*ids*/


#copyrights{
    padding-top: 25px;
}

#futer{
    padding-top: 25px;
    padding-bottom: 25px;
}

#textfield{
    height: 150px;
}

#proyectos{
    background-color: #5A1741;
    color: white;
}

#id-quienes{
    color: white;
    background-color: #5A1741;
    padding-top: 10px;
    padding-bottom: 10px;
}

#imagen-fondo{
    position: relative;;
    z-index: -1;
}

#logo{
    width: 13em;
}

#contacto-desc{
    color: #692C52;
    font-weight: bold;
}

#pasion-div{
    background-image: url("media/portada-mejor.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    min-height: 650px;
    padding: 13px;

    font-size: 1.2em;

    /*Para que se centre el texto*/
    display: table;
    width: 100%;
}

#pasion-div > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#pasion-texto{
    font-family: 'Lora', serif;
    color: white;
    font-size: 5em;
    /*width: 400px;*/
}

#quienes{
    background-color: #5A1741;
    height: 200px;
}

/*clases*/

.ch{
    font-weight: bold;
    color: #5A1741;
}

.cs{
    color: #5A1741;
    color: #B7254E;
}

.navbar-nav{
    background-color: white;
    font-weight: bold;
}

.navbar-nav {
    display:table;
    width:100%;
    margin: 0;
    color: #B7254E;
}
.navbar-nav > li {
    float:none;
    display:table-cell;
    text-align:center;

}

.navbar a{
    color: #B7254E !important;
}

.barraRosa-nav{
    width: 100%;
    height: 45px;
    background-color: #B7254E;
}

.barraRosa{
    width: 100%;
    height: 5px;
    background-color: #B7254E;
}

.barraRosa-negra{
    width: 100%;
    height: 5px;
    background-color: #5A1741
}

.hacemos-descripciones{
    color: #B7254E;
}

.hacemos-headers{
    color: #5A1741;
}

.fuente-merri{
    font-family: 'Merriweather', serif;
}

.fuente-sans{
    font-family: 'Open Sans', sans-serif;
}

/*Posicionar verticalmente en el centro*/   
.vertical-align {
    vertical-align: middle;
    display: inline-block;
}

.form-group > input{
    width: 50%;
}

Answer 1

尝试添加

html, body { margin: 0; }

Answer 2

即使没有子列，我认为你过去常常class="row"。例如，你做了这个

<!--Sldeshow -->
<div class="container-fluid">
    <div class="row "> /*remove this class="row" because you're not using col*/
        <div id="pasion-div">
            <div class="text-center">
                <h1 id="pasion-texto">Pasión por el vestuario</h1>
            </div>
        </div>
    </div>
</div>

它应该是这样的

    <!--Sldeshow -->
<div class="container-fluid">
    <div> /*yep, this is right*/
        <div id="pasion-div">
            <div class="text-center">
                <h1 id="pasion-texto">Pasión por el vestuario</h1>
            </div>
        </div>
    </div>
</div>

那么为什么删除类行呢？如果你看一下bootstrap.css，你可以看到.row有margin: 0 -15px，为什么会这样？这样它就可以删除15px类的多余col-xx-00。因此，请尝试删除占用不必要的空格的class='row'。

在这里，我试图删除不必要的行。

＆＃13;

    <!-- navbar -->
    <nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
            <span class="sr-only">Navegación</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">¿Quiénes somos?</a></li>
                    <li><a href="#">¿Qué hacemos?</a></li>
                    <li>
                        <a href="#"><img id="logo" src="media/logo-menu.png" alt=""></a>
                    </li>
                    <li><a href="#">Nuestros proyectos</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--fin del navbar-->

    <!--Barra rosa única del navbar-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa-nav"></div>
        </div>
    </div>

    <!--Sldeshow -->
    <div class="container-fluid">
        <div> /*removed class="row" here*/
            <div id="pasion-div">
                <div class="text-center">
                    <h1 id="pasion-texto">Pasión por el vestuario</h1>
                </div>
            </div>
        </div>
    </div>

    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa"></div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 text-center img-responsive" id="id-quienes">
                <img id="img-vestido" src="media/vestido.png" alt="Vestido">
            </div>
        </div>
    </div>

    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa"></div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center fuente-sans" id="hacemos">
                <h1>¿Qué hacemos?</h1>
            </div>
        </div>
        <br>
        <div class="row text-center fuente-merri">
            <div class="col-sm-4">
                <img src="media/icono-renta.png" alt="">
                <p class="hacemos-headers"><b>Renta de vestuario</b></p>
                <!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
            </div>
            <div class="col-sm-4">
                <img src="media/icono-coordinacion.png" alt="">
                <p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
            </div>
            <div class="row">
                <img src="media/icono-diseno.png" alt="">
                <p class="hacemos-headers"><b>Diseño de vestuario</b></p>
            </div>
        </div>
        <div class="row text-center fuente-merri">
            <div class="col-sm-4">
                <img src="media/icono-espacios.png" alt="">
                <p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
            </div>
            <div class="col-sm-4">
                <img src="media/icono-realizacion.png" alt="">
                <p class="hacemos-headers"><b>Realización</b></p>
            </div>
            <div> /*removed class="row" here*/
                <img src="media/icono-mantenimiento.png" alt="">
                <p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
            </div>
        </div>
    </div>

    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa"></div>
        </div>
    </div>


    <div id="proyectos">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center fuente-sans">
                    <h1>Nuestros proyectos</h1>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-12 text-center fuente-merri">
                    <p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
                </div>
            </div>
            <br>
            <div class="row text-center fuente-sans">
                <div class="col-sm-4">
                    <img src="media/circ-1.png" alt="">
                    <h4>Diseño de vestuario</h4>
                </div>
                <div class="col-sm-4">
                    <img src="media/circ-2.png" alt="">
                    <h4>Producción y coordinación de vestuario</h4>
                </div>
                <div class="col-sm-4">
                    <img src="media/circ-3.png" alt="">
                    <h4>Renta de vestuario</h4>
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <div class="row text-center fuente-sans">
                <div class="col-sm-6">
                    <img src="media/circ-4.png" alt="">
                    <h4>Servicio social</h4>
                </div>
                <div class="col-sm-6">
                    <img src="media/circ-5.png" alt="">
                    <h4>Actividades del mes</h4>
                </div>
            </div>
        </div>
    </div>


    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa"></div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center fuente-sans">
                <h1>Contacto</h1>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-sm-12 text-center fuente-merri">
                <div id="contacto-desc">
                    <p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
                </div>
            </div>
        </div>
        <div class="text-center">  /*removed class="row" here*/
            <form role="form">
                <div class="form-group">
                    <input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
                </div>
                <div class="form-group">
                    <input type="email" name="" value="" placeholder="Correo electrónico">
                </div>
                <div class="form-group">
                    <input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
                </div>
                <button type="button" class="btn btn-primary">ENVIAR</button>
            </form>
        </div>
        <br>
        <div class="row text-center fuente-merri">
            <p class="ch">Teléfonos</p>
            <p class="cs">044 55 5601 1231</p>
            <br>
            <p class="ch">Correo eletrónico</p>
            <p class="cs">info@tramaydrama.mx</p>
            <br>
            <p class="ch">Dirección</p>
            <p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
        </div>
    </div>
    <br>
    <!--Barra rosa-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 barraRosa-negra"></div>
        </div>
    </div>

    <!--Footer-->
    <footer>
        <div class="container">
            <div class="row fuente-sans">
                <div class="col-sm-12 text-center" id="futer">
                    <a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
                    <img src="media/icono-inst.png" alt="Instagram">
                    <img src="media/icono-vimeo.png" alt="vimeo">
                    <p id="copyrights">Copyright Trama & Drama 2016 &copy;. Todos los derechos reservados | Página web por <a target="_blank"
                            href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
                </div>
            </div>
        </div>
    </footer>

＆＃13;

或者如果您愿意，可以将row添加到以下标记，而不是删除col-sm-12。例如<div class="row"><div class="col-sm-12"><p>hey~</p></div></div>

Answer 3

尝试一下：

body {
    overflow-x: hidden;
}

使用Bootstrap删除网页右侧的空白区域

3 个答案: