0

Según la documentación de bootstrap en el apartado Text, dice que se puede mostrar texto en el navbar. Quiero mostrar dos textos, pero se muestran juntos, cómo puedo ponerles un espacio?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav text-center">
        <a class="nav-item nav-link" href="#">Inicio</a>
        <a class="nav-item nav-link" href="#">Servicios</a>
        <a class="nav-item nav-link" href="#">Contacto</a>
      </div>
    </div>
  </div>

<span class="navbar-text">
	Estado
</span>
<span class="navbar-text">
	Año
</span>

</nav>

2 respuestas 2

1

Le agregas entre <span> y <span> un "Non-breaking space" también conocido como "Espacio duro":

&nbsp;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav text-center">
        <a class="nav-item nav-link" href="#">Inicio</a>
        <a class="nav-item nav-link" href="#">Servicios</a>
        <a class="nav-item nav-link" href="#">Contacto</a>
      </div>
    </div>
  </div>

<span class="navbar-text">
	Estado
</span>
&nbsp;
<span class="navbar-text">
	Año
</span>

</nav>

1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav text-center">
        <a class="nav-item nav-link" href="#">Inicio</a>
        <a class="nav-item nav-link" href="#">Servicios</a>
        <a class="nav-item nav-link" href="#">Contacto</a>
      </div>
    </div>
  </div>

<span class="navbar-text">
	Estado
</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<span class="navbar-text">
	Año
</span>

</nav>

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.