0

Hice unas cajas para mostrar unos anuncios con list-group de Bootstrap y cada ítem viene por defecto con un borde, se los quito con border-0 porque sino me muestra el contorno por cada ítem (ver imagen #01), pero necesito que el contorno del anuncio se muestre (con un borde) para diferenciar un anuncio del otro, pero se muestra incompleto (ver imagen #02).

Imagen #01: imagen#01

Imagen #02: imagen#02

Código:

@foreach ($ads as $key => $ad)
    <ul class="list-group flex-lg-row border rounded mb-3">
    <li class="list-group-item">
        <img class="rounded-circle" src="https://randomuser.me/api/portraits/men/32.jpg">
    </li>
    <li class="list-group-item">
         <h4><b>{{ $ad->title }}</b></h4>
           <p>{{ $ad->description }}</p>
    </li>
    <li class="list-group-item">
        <a href="#" class="btn btn-blue">Ver anuncio</a>
    </li>
    </ul>
@endforeach
3
  • Sin ver algo de código será dificil ayudarte.
    – Jemonge
    el 22 ene. 2020 a las 22:10
  • Disculpa, lo había olvidado. Ya lo publiqué. Gracias! @Jemonge
    – Joseph
    el 22 ene. 2020 a las 22:34
  • Acabo de probar tu código agregando la clase border-0 a cada item en <li> y no se muestra el error que mencionas. Por favor trata de reproducir el error en la pregunta, puedes visitar este enlace si tienes dudas: Cómo crear un ejemplo mínimo, completo y verificable el 28 ene. 2020 a las 13:07

1 respuesta 1

0

Estás creando un 'li' para cada elemento del anuncio, por eso te incluye un borde para cada elemento en la imagen1, prueba con:

 @foreach ($ads as $key => $ad)
     <ul class="list-group flex-lg-row border rounded mb-3">
    <li class="list-group-item">
        <img class="rounded-circle" src="https://randomuser.me/api/portraits/men/32.jpg">
         <h4><b>{{ $ad->title }}</b></h4>
           <p>{{ $ad->description }}</p>
        <a href="#" class="btn btn-blue">Ver anuncio</a>
    </li>
 </ul>
 @endforeach

Si además te 'borra' el borde inferior (inagen2) bien puede ser simplemente un error de visualización del navegador, bien porque estás 'corrigiendo' con tu CSS los espacios genera bootstrap en cada elemento. Prueba a ampliar este 'margin-bottom' para ver de qué se trata. Y así poder corregirlo.

5
  • Necesito que estén cada uno en un li para que se muestren uno debajo del otro en las columnas small, ya tiene elmargin-bottom (mb-3)
    – Joseph
    el 22 ene. 2020 a las 23:05
  • No sé a qué te refieres con las 'columnas', pero si hablas del responsive puedes usar el sistema de grid de bootstrap con 'col-x' para cada breakpoint que necesites en cada elemento o bien hacerlo tu personalmente con CSS. De todas formas comparte tu CSS también por si eso ayuda a que se pueda resolver tu pregunta. Ya vi el mb-3, te decía que le dieras aún más para comprobar si es un problema de CSS o de visualización.
    – JorgeGuz
    el 22 ene. 2020 a las 23:11
  • Con cada elemento me refiero a 'img', 'h4' y 'a', todo puede cargarse dentro del mismo 'li'.
    – JorgeGuz
    el 22 ene. 2020 a las 23:18
  • list-group y list-group-item se encargan de ello sin utilizar 'col-x', getbootstrap.com/docs/4.4/components/list-group (Ve en el enlace anterior la sección Horizontal) y si reduces el tamaño del navegador a small ve como se posicionan uno encima del otro. Yo cambié "list-group-horizontal" por "flex-lg-row" y mantengo los "list-group-item" en los li
    – Joseph
    el 22 ene. 2020 a las 23:21
  • En la documentación dice exactamente lo que yo te he dicho, que metas todos los elementos dentro del mismo 'li'.
    – JorgeGuz
    el 22 ene. 2020 a las 23:23

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.