Question

到目前为止，我有以下模板：

     <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Welcome</title>
</head>
<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='.navbar-collapse'>
                        <span class='sr-only'>Toggle navigation</span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                    </button>
                    <a class='navbar-brand' href=""><img src="images/Evaluate_Pharma_Logo_220.png" /></a>
                </div>
                <div class="clear-fix"></div>
                <div class="navbar-collapse collapse">
                    <ul class='nav navbar-nav'>
                        <li>
                            <a href="">
                                <input type="text" /><span class="fa fa-search big"> </span> SEARCH
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span class=""></span>BROWSE DATA
                            </a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                CREATE REPORT
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="" rel="Company & Country Profiles">Company &amp; Country Profiles</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                PEER GROUPS
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu"></ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                YOUR EVALUATION
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu"></ul>
                        </li>
                    </ul>
                </div>


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

运行此命令时，将按预期获取菜单，但是当减小页面宽度时，导航栏切换按钮类将显示在导航栏品牌的右侧。我需要这个在它的左边，我该如何实现呢？这只是外壳，我知道我需要填写我的hrefs和其他内容

Answer 1

bootstrap将其正确浮动，因此您可以使用：

.navbar-toggle {
  float: left !important;
}

注意：最好不要使用“！important”，因此，请在与.navbar-toggle相同的按钮元素中添加新的id选择器，并添加相同的属性和值。

如何在引导程序3.3.7中强制将导航栏切换到Brand的左侧

1 个答案: