Twitter Bootstrap 3中的导航栏图标位置

Question

Currently working on a page for a project and I have my code for collapsing the navbar when the screen is adjusted for mobile. 目前正在为一个项目的页面工作，当屏幕针对移动设备进行调整时，我有用于折叠导航栏的代码。 Everything works the way it should, my only problem is the position of the icon bar. 一切都按应有的方式工作，我唯一的问题是图标栏的位置。 Normally the icon bar is in the right hand corner of the page when it collapses, but is it possible to have it on the left hand side instead. 通常，折叠时，图标栏位于页面的右上角，但也可以将其放在左侧。 I have searched around and I can find plenty of info on changing the icon image, at what point the navbar collapses, etc., but nothing on moving it to the other side of the screen. 我四处搜寻，可以找到许多有关更改图标图像，导航栏在何时折叠等的信息，但是将其移至屏幕的另一侧却无济于事。

This is just a basic navbar code with a collapse feature, but I need the icon on the left not the right. 这只是具有折叠功能的基本导航栏代码，但我需要左侧的图标而不是右侧的图标。

<!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>

Answer 1

Just a little bit of css does the magic: 只需一点CSS就能做到：

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

Example 例

Twitter Bootstrap 3中的导航栏图标位置

问题描述

1 个解决方案

解决方案1
0 2014-02-13 22:46:42

Twitter Bootstrap 3中的导航栏图标位置

问题描述

1 个解决方案

解决方案1 0 2014-02-13 22:46:42

解决方案1
0 2014-02-13 22:46:42