0

estoy modificando una pagina creada por un compañero. El problema es que antes tenia 2 columnas y 1 sola fila. Solo hay imagenes ahi. Asi tengo el codigo.

        <div class="row oo">

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><div class="inner-img"><img src="img/imagen-1.jpg"></div></div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><div class="inner-img"><img src="img/imagen-2.jpg"></div></div>
        </div>
        <div class="row oo">

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><div class="inner-img"><img src="img/imagen-3.jpg"></div></div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><div class="inner-img"><img src="img/imagen-4.jpg"></div></div>
        </div>

El problema es que me aparece una sola imagen, por fila, y tendrian que aparecer 2 imagenes por fila en cada columna.

1
  • 1
    Pero sí te aparecen visibles las dos columnas? Qué resolución tiene la pantalla en que lo estás testeando? Commented el 23 mar. 2017 a las 14:32

1 respuesta 1

1

no se cual sea la resolución de tu pantalla, pero recuerda que bootstrap funciona a través de un sistema de rejillas que tiene 12 columnas, adicional a esto ya tiene definido sus puntos de quiebre entre resolución y resolución, entonces si tu pantalla es pequeña y entra entre las resoluciones de las clases xs ó sm, tú tienes definido que ocupen las 12 columnas cada imagen y como no hay mas columnas la que sigue la pone debajo. Entonces puedes decirle que sea 6 y 6 solamente y ya cabrían las dos en una sola fila.

img{
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row oo">

  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="inner-img"><img src="http://www.infotechnology.com/export/sites/revistait/img/internet/2015/07/21/epictierra.png_765980715.png"></div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="inner-img"><img src="http://www.infotechnology.com/export/sites/revistait/img/internet/2015/07/21/epictierra.png_765980715.png"></div>
  </div>
</div>
<div class="row oo">

  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="inner-img"><img src="http://www.infotechnology.com/export/sites/revistait/img/internet/2015/07/21/epictierra.png_765980715.png"></div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="inner-img"><img src="http://www.infotechnology.com/export/sites/revistait/img/internet/2015/07/21/epictierra.png_765980715.png"></div>
  </div>
</div>

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.