Hola a todos.
Soy nuevo aquí y me gustaría hacerles una pregunta.
Estoy diseñando una página con Bootstrap y en especial estoy usando los Grids. Para mi menú usé la etiqueta nav y listas ul. Mi problema es que quiero que los enlaces me ocupen todo el ancho del grid que lo contiene.
Traté de hacerlo usando la clasee btn (Y si funciońo), pero me convierte cada elemento en botones con los bordes redondeados, cosa que no se ve muy bien para un menú horizontal. Trate de usar border radius pero no funcionó
¿Hay alguna forma que los enlaces cubran todo el ancho del grid?
Aquí mi código
HTML
<nav>
<ul class="menu-general center-block">
<li class="col-md-2 col-sm-2 col-xs-12 btn"><a href="#">Inicio</a></li>
<li class="col-md-2 col-sm-2 col-xs-12 btn"><a href="#">Debian</a></li>
<li class="col-md-2 col-sm-2 col-xs-12 btn"><a href="#">Centos</a></li>
<li class="col-md-2 col-sm-2 col-xs-12 btn"><a href="#">Otros Linux</a></li>
<li class="col-md-2 col-sm-2 col-xs-12 btn"><a href="#">Contacto</a></li>
<li class="col-md-2 col-sm-2 col-xs-12 btn"><a href="#">Acerca de</a></li>
</ul>
</nav>
CSS
margin: 0;
padding: 0;
}
.menu-general li{
list-style-type: none;
color: #555;
font-size: 1.3em;
background: #ccc;
text-align: center;
padding: 20px 0;
}
nav > .menu-general a {
color: #555;
font-family: 'Open Sans';
-moz-border-radius: none;
-webkit-border-radius: none;
}
nav > .menu-general a:hover {
color: #555;
-moz-border-radius: none;
-webkit-border-radius: none;
}
nav > .menu-general a:link {
color: #555;
text-decoration: none;
-moz-border-radius: none;
-webkit-border-radius: none;
}
nav > .menu-general a:visited {
color: #555;
-moz-border-radius: none;
-webkit-border-radius: none;
}
Respuestas
¿Podrías decirnos que versión de Bootstrap estás usando? en bootstrap 4 una barra de navegación responsive seria así:
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Menú</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Inicio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Debian</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Centos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Otros Linux</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contacto</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Acerca de</a> </li> </ul> </div> </nav>
Si quieres que cada enlace <li> ocupe las doce columnas la estructura seria así:
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Menú</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse container-fluid" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto row"> <li class="nav-item active col-12"> <a class="nav-link" href="#">Inicio</a> </li> <li class="nav-item col-12"> <a class="nav-link" href="#">Debian</a> </li> <li class="nav-item col-12"> <a class="nav-link" href="#">Centos</a> </li> <li class="nav-item col-12"> <a class="nav-link" href="#">Otros Linux</a> </li> <li class="nav-item col-12"> <a class="nav-link" href="#">Contacto</a> </li> <li class="nav-item col-12"> <a class="nav-link" href="#">Acerca de</a> </li> </ul> </div> </nav>
donde al </div> que contiene los <ul> le asignamos la clase "container-fluid" para que abarque el 100% del ancho de la página y al <ul> le asignamos la clase "row" que indica que va en filas, después a los <li> les asignamos la clase "col-12" osea que cada uno ocupe las doce columnas de las filas. Te recuerdo que el ejemplo es en Bootstrap4 y que para poder usar la clase que asigna columnas por fila, debes haber contenido los elementos en un </div> con clase "container" o "container-fluid" y después en un </div> con clase "row", para el final poner la clase "col-12", "col-md-12" o del ancho que desees según el diseño.
@leo_tinoco_a