La clase .ml-auto en Bootstrap se puede usar para alinear los elementos de la barra de navegación a la derecha. La clase .ml-auto alinea automáticamente los elementos a la derecha. En este artículo, alinearemos la barra de navegación a la derecha de dos maneras diferentes, a continuación se analizan ambos enfoques con un ejemplo adecuado.
Ejemplo 1: en el primer ejemplo, usamos la clase .ml-auto de Bootstrap 4 para alinear los elementos de la barra de navegación a la derecha. La clase .ml-auto proporciona automáticamente un margen izquierdo y desplaza los elementos de la barra de navegación a la derecha.
- Programa:
<!DOCTYPE html><html><head><!-- Including the bootstrap CDN --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script></head><body><!-- Creating a navigation bar using the.navbar class of bootstrap --><navclass="navbar navbar-expand-sm bg-light"><ulclass="navbar-nav ml-auto"><liclass="nav-item"><aclass="nav-link"href="#">About</a></li><liclass="nav-item"><aclass="nav-link"href="#">Contacts</a></li><liclass="nav-item"><aclass="nav-link"href="#">Settings</a></li></ul></nav></body></html> - Producción:
Ejemplo 2: En este ejemplo, no usamos ninguna clase de Bootstrap 4 predefinida para alinear los elementos. En este ejemplo, creamos una barra de navegación y luego usamos CSS para dar el margen izquierdo como un auto que desplaza los elementos de la barra de navegación a la derecha.
- Programa:
<!DOCTYPE html><html><head><!-- Including the bootstrap CDN --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script><style>.navbar-nav {margin-left: auto;}</style></head><body><!-- Creating a navigation bar using the.navbar class of bootstrap --><navclass="navbar navbar-expand-sm bg-light"><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link"href="#">About</a></li><liclass="nav-item"><aclass="nav-link"href="#">Contacts</a></li><liclass="nav-item"><aclass="nav-link"href="#">Settings</a></li></ul></nav></body></html> - Producción: