Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

160
Vistas
¿Cómo reducir el ancho del borde inferior de un lado en html?

En realidad, tengo que mostrar la barra inferior a la página actualmente activa. Estoy usando el operador ternario en PHP. La barra inferior se muestra pero su ancho horizontal es un poco extra. No he podido reducir su ancho. Aquí hay una foto de eso:

https://i.stack.imgur.com/9mWRJ.png

Aquí está el operador ternario que usé:

 <ul class="navbar-nav me-auto mb-2 ms-auto mb-lg-0"> <li class="{{'/' == request()->path() ? 'nav-item' : ''}}"> <a class="nav-link" href="{{route('home')}}">Home</a> </li> <li class="{{'novels' == request()->path() ? 'nav-item' : ''}}"> <a class="nav-link" href="{{route('novels')}}">Novels</a> </li> <li class="{{'about' == request()->path() ? 'nav-item' : ''}}"> <a class="nav-link" href="{{route('about-us')}}">About Us</a> </li> <li class="{{'contact' == request()->path() ? 'nav-item' : ''}}"> <a class="nav-link" href="{{route('contact-us')}}">Contact Us</a> </li> </ul>

Aquí está el css:

 .nav-item { border-bottom:3px rgb(0, 0, 0) solid; margin-bottom: 19px; }
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

En primer lugar, el problema no está en la lógica de PHP (más bien en el motor de plantillas Smarty o Blade). El problema está en su definición de CSS. Estableces el borde de tus elementos <li> .

Solución propuesta

Utilice el nav-item la clase css para todos sus <li> en la sección de la barra de navegación. Porque todos estos elementos <li> en su barra de navegación describen un elemento de navegación independientemente del hecho de que la página actual sea igual a uno de ellos o no.

Utilice más bien una clase adicional como current para marcar el elemento de navegación de la página real. Lo hice por ti.

 <ul class="navbar-nav me-auto mb-2 ms-auto mb-lg-0"> <li class="nav-item {{'/' == request()->path() ? 'current' : ''}}"> <a class="nav-link" href="{{route('home')}}">Home</a> </li> <li class="nav-item {{'novels' == request()->path() ? 'current' : ''}}"> <a class="nav-link" href="{{route('novels')}}">Novels</a> </li> <li class="nav-item {{'about' == request()->path() ? 'current' : ''}}"> <a class="nav-link" href="{{route('about-us')}}">About Us</a> </li> <li class="nav-item {{'contact' == request()->path() ? 'current' : ''}}"> <a class="nav-link" href="{{route('contact-us')}}">Contact Us</a> </li> </ul>

Entonces deberías usar la siguiente definición de CSS:

 .nav-item.current a.nav-link{ border-bottom:3px black solid; padding-bottom: 10px; }

upvote a favor y accept esta respuesta, si resuelve su problema.

Aquí hay una captura de pantalla de mi solución:

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza Denunciar

0

No puedo leer ni probar tu código. Es posible que necesitemos el código donde declaró el espacio entre su nav-item (li) ; sin embargo, si el espacio entre ellos es causado por padding-right , entonces cámbielo a margin-right , u obtenga ese aspecto de flex gap ; deberia de funcionar.

 //no changes needed in this code .nav-item { border-bottom:3px rgb(0, 0, 0) solid; margin-bottom: 19px; }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda