2

introducir la descripción de la imagen aquí

Hay un borde blanco que no puedo quitar y no sé por qué se forma. Sólo aparece en la versión responsiva móvil.

   /*/*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;
    }
    
    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: 3em;
        /*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%;
    }
    <!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" id="id-quienes">
                    <center><img class="img-responsive" id="img-vestido" src="media/vestido.png" alt="Vestido"></center>
                </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">[email protected]</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>

0

2 respuestas 2

4

A diferencia de lo que menciona Error404

Yo sugiero no modificar nada del Core de Bootstrap, lo que pasa es que el maquetado está mal. Digo si vamos a utilizar un framework el chiste es utilizarlo de forma correcta.

Tu error es utilizar más de un "container", ya que solo debe haber uno.

<div class="container">
    <div class="row">
        <div class="col-md-12>

        <!-- Tambien puede haber rows dentro de las Col -->
            <div class="row">
               <div class="col-md-12>
               </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12>
        </div>
    </div>
</div>

Solo ten cuidado, pues la clase "Row" abarca toda la Fila, sin respetar margenes...

En fin para probar esta teoria solo deja 1 div con class container.

1
  • 1
    Tendré en cuenta tu solución. Sin embargo la de Error404 funcionó.
    – dawn
    Commented el 11 dic. 2016 a las 18:27
2

Esto se debe a que Bootstrap añade márgenes y paddings a algunos elementos automáticamente. En este caso, los que están provocando que se vea un hueco a la derecha de tu página son los que afectan a la clase .container-fluid y .row los cuales tienen padding-right: 15px y margin-right: 15px.

Simplemente sobrescribe en tu fichero CSS ambas clases (.container-fluid y .row) para quitar el padding-right y el margin-right respectivamente asignándoles el valor de 0.

Tendrás que tener en cuenta la specificity de los elementos que no es más que la preferencia en el orden en el que se aplica el CSS en los elementos ya que los elementos de Bootstrap tienen más specificity que los de tu fichero CSS.

Para poder sobrescribir ambas clases tendrás que hacer:

div.row{
   margin-right: 0px;
}

div.container-fluid{
   padding-right: 0px;
}

en tu fichero CSS.

Tu ejemplo corregido:

/*/*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;
    }
    
    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: 3em;
        /*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%;
    }

    div.row{
      margin-right: 0px;
    }

    div.container-fluid{
      padding-right: 0px;
    }
<!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" id="id-quienes">
                    <center><img class="img-responsive" id="img-vestido" src="media/vestido.png" alt="Vestido"></center>
                </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">[email protected]</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>

2
  • 1
    Solucionó mi problema; se ve bien en dispositivos móviles.
    – dawn
    Commented el 11 dic. 2016 a las 18:27
  • Total, la solución es esta
    – Mateo Guio
    Commented el 18 may. 2022 a las 14:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.