Как выровнять правильные учетные записи: ui loginButtons в Bootstrap Navbar?

Я пытаюсь получить учетные записи: ui loginButtons для выравнивания по правому краю в Navstart Bootstrap. Функциональность - это хорошо, но независимо от того, что я пытаюсь, это не будет направо. В настоящее время он находится слева после кнопки «Загрузить». Любая помощь оценивается.Как выровнять правильные учетные записи: ui loginButtons в Bootstrap Navbar?

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="/">REVUME</a> 
    </div> 

    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="/">Home</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CATEGORIES <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="digital_art">DIGITAL ART</a></li> 
      <li><a href="drawing">DRAWING</a></li> 
      <li><a href="graphic_design">GRAPHIC DESIGN</a></li> 
      <li><a href="illustration">ILLUSTRAION</a></li> 
      <li><a href="painting">PAINTING</a></li> 
      <li><a href="photography">PHOTOGRAPHY</a></li> 
      <li><a href="ui_ux">UI/UX</a></li> 
      </ul> 
     </li> 
     <button type="button" class="btn btn-default navbar-btn">UPLOAD</button> 
     <a href="#"><span class="glyphicon glyphicon-user"></span> {{> loginButtons align="right"}} </a> 
    </ul> 
    </div> 

    </div> 
</nav>

источник

2017-01-24 Stickup Artist

Попробуйте это будет работать :)

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<title>Bootstrap Case</title> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script> 
 
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/> 
 
</head> 
 
<style type="text/css"> 
 
    #right-button { 
 
    margin-right: 20px; 
 

 
    } 
 
    #glyph { 
 
    } 
 
</style> 
 
<body> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
     <a class="navbar-brand" href="/">REVUME</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="/">Home</a></li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CATEGORIES <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="digital_art">DIGITAL ART</a></li> 
 
      <li><a href="drawing">DRAWING</a></li> 
 
      <li><a href="graphic_design">GRAPHIC DESIGN</a></li> 
 
      <li><a href="illustration">ILLUSTRAION</a></li> 
 
      <li><a href="painting">PAINTING</a></li> 
 
      <li><a href="photography">PHOTOGRAPHY</a></li> 
 
      <li><a href="ui_ux">UI/UX</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><button id="right-button" type="button" class="btn btn-default navbar-btn navbar-right">UPLOAD</button></li> 
 
     <li> 
 
     <a href="#"><span id="glyph" class="glyphicon glyphicon-user" ></span> </a></li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 
</body> 
 
</html>

Используйте класс navbar-right с элементом, который вы пытаетесь выровнять по правой стороне ,

источник

2017-01-24 23:51:49 neophyte

Пробный '

' Это подняло его, но не так. Что я делаю не так? –

@Stickup Исполнитель Я отредактировал свой ответ Попробуйте сейчас – neophyte

Упс. Это поместило кнопку Upload Button вправо. Затем добавьте глификон для входа в него без доступа к форме входа. –

Как выровнять правильные учетные записи: ui loginButtons в Bootstrap Navbar?

ответ

Смежные вопросы