5

Estoy realizando una plantilla Wordpress usando el Framework Bootstrap 3.x, al adaptarlo a WP las listas li me las muestra con márgenes, además de que también perjudica a la manera de mostrar las categorías en cada artículo.

Les muestro algunas capturas para que vean cómo está quedando:

Asi me muestra la categoría en Wordpress Asi me muestra las listas de links por ejemplo

¿Existe alguna manera de quitarle esos márgenes en las listas para que se vean de forma correcta?

2
  • Nos puedes mostrar el HTML/CSS que estas usando? "Quitar los margenes en las listas" no es suficiente para poder ayudarte
    – ReynierPM
    el 27 dic. 2015 a las 2:53
  • Hola y bienvenido! para poder recibir ayuda, edita la pregunta y agrega el pedazo de HTML y cualquier CSS personalizado que lo afecte. De la imagen no se puede deducir como lo hiciste. Salu2! el 27 dic. 2015 a las 12:44

1 respuesta 1

2

Una solución con Bootstrap sería hacer uso del par de clases que hacen que las listas no tengan estilos o márgenes:

  • list-unstyled: elimina el estilo de la lista (list-style) y el márgen de los elementos. Es importante que sepas que ese estilo sólo se aplica a los hijos directos; si tienes una sublista, tendrás que añadir la clase list-unstyled para esa también.

  • list-inline: elimina el estilo de la lista (list-style) y el márgen de los elementos, aunque añade un poco de padding. Como indica el nombre de la clase, convierte la lista a inline y es muy útil para listas horizontales como en los menús o las categorías de artículos.

Y si quieres que sigan teniendo estilo de lista (el guioncito o icono que aparece junto a cada elemento), puedes definir su propia clase con la propiedad list-style y añadirla en combinación con las ya mencionadas.


Otra solución independiente de Bootstrap sería definir tus propios estilos con un margin y padding izquierdo de cero para la lista (ul y/o ol) y los elementos de la lista (li):

ul, li {
    padding-left:0;
    margin-left:0;
}

Puedes ser más específico si quieres y poner sólo las listas que te interesen (indicando clases o identificadores). Si eso no funciona, puede ser porque algún estilo de Bootstrap (u otro fichero) tenga precedencia sobre el estilo y puedes usar el modificador !important para darle prioridad a tus estilos:

ul, li {
    padding-left:0 !important;
    margin-left:0 !important;
}

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.