0

Tengo el siguiente menu creado con boostrapt :

<!DOCTYPE html>
<html lang="es">
<head>
	<title>example video</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

</head>
<body>


<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<br>
<iframe class="embed-responsive embed-responsive-16by9" width="560" height="315" src="https://www.youtube.com/embed/DK_0jXPuIr0"   frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- 
Recursos usados :
https://v4-alpha.getbootstrap.com/getting-started/introduction/


-->
</body>
</html>

y los link esta localizados a la derecha ( mia ) me gustaria mandar uno a la izquierda y otro a la derecha, alguien sabe como podria hacerlo?

Por ejemplo el link house a la izquierda y los otros a la derecha (edito)

6
  • Cuales links ? los del menú ? quieres que queden en alineación horizontal ? por favor explícate mejor Commented el 6 dic. 2017 a las 22:03
  • Listo ya edite la pregunta
    – simon
    Commented el 6 dic. 2017 a las 22:08
  • Creo que aun no es lo suficientemente claro, tome en cuenta que los items del nav, en pantallas (referenció el tamaño con las clases de bootstrap) md-lg se ven en la barra, pero en pantallas xs-sm se ocultan, quedando en un menú desplegable.
    – Michael
    Commented el 6 dic. 2017 a las 22:17
  • @Michael Bootstrap 4 incorpora clases para manipular comportamientos dependiendo la resolución de pantalla, por lo cual eso no es problema en este caso...o te refieres a en que resolución quiere mostrarlos en ese orden ? Commented el 6 dic. 2017 a las 22:30
  • @CamiloVasquez gracias por la aclaración, y si esa era mi pregunta.
    – Michael
    Commented el 6 dic. 2017 a las 22:34

1 respuesta 1

1

Bootstrap te provee clases para lograr lo que quieres, solo es cuestión de conocerlas poco a poco, acá te dejo el ejemplo funcional donde podrás observas con detenimiento las clases que he usado (flex-row, px-2, mr-auto, w-100).

Para más información podrías visitar Flex

<!DOCTYPE html>
<html lang="es">
<head>
	<title>example video</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

</head>
<body>


<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
    <ul class="navbar-nav flex-row w-100">
      <li class="nav-item px-2 mr-auto active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item px-2">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item px-2">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<br>
<iframe class="embed-responsive embed-responsive-16by9" width="560" height="315" src="https://www.youtube.com/embed/DK_0jXPuIr0"   frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>



<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- 
Recursos usados :
https://v4-alpha.getbootstrap.com/getting-started/introduction/


-->
</body>
</html>

1
  • 1
    Gracias por tu respuesta me ayudo mucho :) y lo siento si mi pregunta fue algo nuuf pero no conozco complamente la version 4
    – simon
    Commented el 6 dic. 2017 a las 23:10

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.