2

En un servidor gratuito tengo cierta parte del contenido de una plantilla que estoy imitando.

Realizando la imitación de una manera más optimizada, la plantilla que estoy tratando de imitar es esta myone.

A pesar de que el 80% de la plantilla está imitada, se me ha presentado un error el contenido del texto se encima al contenido de la imagen al cambiar el tamaño del navegador.

Sinceramente aun desconozco a fondo la utilización de Bootstrap algo nuevo en el plugin, lo cual me a dificultado encontrar el error.

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />

<div id="prueba">
  <div class="container">
  <div class="col-sm-6">
    <img src="http://template58621.motopreview.com/mt-demo/58600/58621/mt-content/uploads/2016/03/mt-0362-home-ipad.jpg">
  </div>
  
  <div class="col-sm-6">
    <div style="padding: 0 1px;">
      <p class="moto-text_system_6">Discover the advantages</p>
    </div>
    <div style="padding: 0 1px;">
      <p>Thanks to our experience and the centrality of the attention to the wishes of our customers, we create Web projects at the highest professional level<br></p>
    </div>

    <div class="container-fluid">
        <div class="col-sm-2">
            <img src="http://template58621.motopreview.com/mt-demo/58600/58621/mt-content/uploads/2016/03/mt-0362-home-discover2.png">
        </div>
        <div class="col-sm-10">
            <p><a href="#">Web development</a></p>
       </div>
    </div>
    <div class="container-fluid">
        <div class="col-sm-2">
            <img src="http://template58621.motopreview.com/mt-demo/58600/58621/mt-content/uploads/2016/03/mt-0362-home-discover2.png">
        </div>
        <div class="col-sm-10">
            <p><a href="#">Web development</a></p>
       </div>
    </div>
 </div>
  </div>
</div>

1 respuesta 1

1

El texto se encima cuando el ancho de tu página está entre los 750px y 970px, esto es por que tu estás usando el prefijo .col-sm en las columnas de tu layout lo cual hace que estas se colapsen hasta los 750px, simplemente cambia el .col-sm por .col-md y esto va a hacer que las columnas se colapsen desde los 970px y por ende ya no se encime el texto.

Como comentario adicional ten cuidado en como estructuras el html de tu layout, bootstrap recomienda que debes de tener una estructura de la siguiente forma .container > .row > .col-md-x, por lo tanto yo te recomendaría que dejaras tu html de la siguiente forma:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="http://template58621.motopreview.com/mt-demo/58600/58621/mt-content/uploads/2016/03/mt-0362-home-ipad.jpg">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div style="padding: 0 1px;">
                        <p class="moto-text_system_6">Discover the advantages</p>
                    </div>
                    <div style="padding: 0 1px;">
                        <p>Thanks to our experience and the centrality of the attention to the wishes of our customers, we create Web projects at the highest professional level<br></p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2">
                    <img src="http://template58621.motopreview.com/mt-demo/58600/58621/mt-content/uploads/2016/03/mt-0362-home-discover2.png">
                </div>
                <div class="col-md-10">
                    <p><a href="#">Web development</a></p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2">
                    <img src="http://template58621.motopreview.com/mt-demo/58600/58621/mt-content/uploads/2016/03/mt-0362-home-discover2.png">
                </div>
                <div class="col-md-10">
                    <p><a href="#">Web development</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

Te recomiendo que le des una leida a la documentación de bootstrap, sobre todo a la sección del Grid, te vas a ahorrar muchos quebraderos de cabeza.

2
  • Hola @BernardoLezama Tengo una duda sobre la estructura bootstrap la forma correcta como lo indicas .container > .row > .col-md-x solo es para las rejillas de porcentajes col-md col-sm col-md o se debe especificar a todo tipo del diseño del layout es decir: empiezo a crear una nueva plantilla, bloque o contenido lo debo especificar de esta forma. <div id="padre"><div class="container"><div class="row"><!-- Aquí el resto de estructura del diseño--></div></div></div>
    – J. Mick
    Commented el 16 feb. 2017 a las 9:58
  • @J.Mick puedes tener solo una estructura <div id="padre"><div class="container"><!-- Aquí el resto de etiquetas con clase .row --></div></div> y dentro del container ir añadiendo todas las etiquetas con clase .row que gustes, pero esto solo es una recomendación, no es a fuerzas y depende de tu diseño Commented el 16 feb. 2017 a las 17:34

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.