2014-02-13 2 views
0

В настоящее время работает над страницей проекта, и у меня есть код для сбрасывания навигационной панели, когда экран настроен для мобильных устройств. Все работает так, как должно, моя единственная проблема - это положение панели значков. Обычно панель значков находится в правом углу страницы, когда она обрушивается, но возможно ли это с левой стороны. Я искал вокруг, и я могу найти много информации об изменении образа значка, в какой момент нарваб рушится и т. Д., Но ничего не перемещает на другую сторону экрана.Значок местоположения Navbar в Twitter Bootstarp 3

Это всего лишь базовый код навигатора с функцией свернуть, но мне нужен значок слева не справа.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 


    <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet"> 
    <link type="text/css" href="css/style.css" rel="stylesheet"> 
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
    </head> 

    <body> 

    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">Practice</a> 
      </div> 

      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="about.html">About</a></li> 
        <li><a href="feature.html">Feature</a></li> 
        <li class="dropdown"> 
        <a href="tutorials" class="dropdown-toggle" data-toggle="dropdown">Tutorials<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Bootstrap Tutorials</a></li> 
         <li><a href="#">PHP Tutorials</a></li> 
         <li><a href="#">Java Tutorials</a></li> 
         <li><a href="#">CSS Tutorials</a></li> 
        </ul> 
        </li> 
        <li><a href="contact.html">Contact</a></li> 
       </ul> 
      </div> 

     </div> 
    </div> 
+0

Будьте уверены, чтобы изменить вопрос, чтобы включить код, который вы работаете. –

ответ

0

Просто немного CSS делает волшебство:

.navbar-toggle { 
    float: left; 
    margin-left: 15px; 
} 

Example

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