0

Hola estoy intentando creado una seccion de productos con este componente de bootstrap 4 :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<style>
.card-block{
      background:#F781F3;
            border-radius:10%;

    }
    
    .card{
     border:none;
     width:500px;
     height:400px;
    }
    </style>
<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up
      the bulk of the card's content.</p>
    <center>
   <img width="150" height="150" src="http://pidefrutasverdurasonline.com/wp-content/uploads/2016/07/slider-img-01.png">
    </center>
  </div>
  
</div>

Okey hasta toda va bien pero cuando intento agregarlo a este GRID de 6 columnas :

<div class="row">
  <div class="col-sm-4 col-md-2" >div1</div>
  <div class="col-sm-4 col-md-2 col-md-push-2" >div3</div>
  <div class="col-sm-4 col-md-2 col-md-push-6" >div5</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div2</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div4</div>
  <div class="col-sm-4 col-md-2" >div6</div>
</div>

si se agregan los productos en cada columns pero el problema es que no se acomoda correctamente bien, Alguien sabe que problema tengo con mi codigo ?

2
  • ¿En que tamaño de pantalla lo estás viendo? Hay que recordar que bootstrap trabaja su sistema Grid con cuatro tamaños diferentes col-lg-* col-md-* col-sm-* y col-xs-* en tu código sólo estás definiendo los tamaños más pequeños de pantalla, de modo que si estás viéndolo en una pantalla más grande se posible que se vea correctamente. el 11 dic. 2017 a las 5:20
  • donde quieres agregar ese grid? (izquierda, derecha, abajo... ) cual es el resultado esperado? el 11 dic. 2017 a las 7:11

1 respuesta 1

0

La solución, es tu código, con la sola excepción del css que le he puesto para ver los bordes de los div.

Me da la impresión de que en el código de ejemplo que pones en la pregunta no está cargando la css. Quizá suceda lo mismo en el proyecto.

.bordes>div{
border:solid 1px red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row bordes">
  <div class="col-sm-4 col-md-2">div1</div>
  <div class="col-sm-4 col-md-2 col-md-push-2">div3</div>
  <div class="col-sm-4 col-md-2 col-md-push-6">div5</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4">div2</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4">div4</div>
  <div class="col-sm-4 col-md-2">div6</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.