html - 右侧的 Bootstrap 导航栏间距

Question

在我的 bootstrap web 应用程序中，在导航栏标题上，右侧没有空间。并且注销链接非常靠近右边框。

如何在右侧留出一些空间？

图片:

index.html

    <!-- Start of Navigation Menu -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="listController">

        <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>
            </button>

            <a class="navbar-brand" rel="home" href="#/list">My Project</a>


        </div>

        <div class="collapse navbar-collapse">

            <div class="bgContainer" style="background-image: url('images/bg_header.gif');">

                <ul class="nav navbar-nav">
                    <li><a href="#/list"><i class="glyphicon glyphicon-registration-mark"></i>List</a></li>
                    <li><a href="#/two"><i class="glyphicon glyphicon-fire"></i> Two</a></li>


                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-leaf"></i> Calendar <b
                            class="caret"></b></a>
                        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                            <li><a href="#/"><i class="glyphicon glyphicon-eye-open"></i> View Submission </a></li>
                            <li><a href="#/"><i class="glyphicon glyphicon-eye-open"></i> View Submission </a></li>
                            <li><a href="#/"><i class="glyphicon glyphicon-calendar"></i> Report  </a></li>
                            <li><a href="#/"><i class="glyphicon glyphicon-list-alt"></i> Template  - </a></li>
                            <li><a href="#/"><i class="glyphicon glyphicon-book"></i>  Calendar</a></li>
                            <li class="dropdown-submenu"><a tabindex="-1"> <i class="glyphicon glyphicon-cog"></i>Generate 
                            </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#/"><i class="glyphicon glyphicon-cog"></i>   Report </a></li>
                                    <li><a href="#/"><i class="glyphicon glyphicon-cog"></i>  Draft  </a></li>
                                </ul></li>
                            <li><a href="#/"><i class="glyphicon glyphicon-eye-open"></i>  Feedback</a></li>
                        </ul></li>




                    <li><a href="dashboard"><i class="glyphicon glyphicon-blackboard"></i> Dashboard</a></li>
                </ul>


                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i>
                                {{fullName}} <span class="caret"></span></a>
                            <ul id="g-account-menu" class="dropdown-menu" role="menu">
                                <li><a href="#/underConstruction">My Profile</a></li>
                            </ul></li>
                        <li><a href="#/underConstruction"><i class="glyphicon glyphicon-lock"></i> Logout </a></li>
                        <!-- Spacer -->
                        <li>     </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <!-- End of Navigation Menu -->

Answer 1

这可能是由 .navbar-right 类由于导航栏容器的定位或溢出问题引起的。

默认 Bootstrap 规则:

.navbar-right {
    margin-right: -15px;
}

覆盖它:

.navbar-right {
    margin-right: 0;
}