从Bootstrap 3导航栏的崩溃中排除菜单项

申屠新觉

2023-03-14

问题内容：

这就是我所拥有的，我尝试在“品牌”内部移动我的部分，并在品牌外部和折叠之外进行向右拉动，并向左/向右拉动，同时还尝试将其放置在之前或之后崩溃部分。

将其添加到“品牌”部分时，它可以工作，但会下降到新的一行。如何保持同一行？

    <body>
        <header>
            <nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">@Html.ActionLink("Manager", "Index", "Player")</div>
                    </div>

                    <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
                        <ul class="nav navbar-nav">
@*                          <li class="active">@Html.ActionLink("Home", "Index", "Player")</li>
                            <li class="active">@Html.ActionLink("Match", "Index", "Match")</li>                             <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li>@Html.ActionLink("Change Password", "ManagePassword", "Account")</li>
                                    <li>@Html.ActionLink("Update Profile Info", "UpdateProfile", "Account")</li>
                                    <li>@Html.ActionLink("Log Off", "LogOff", "Account")</li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <!-- I don't want it apart of the collapsible portion -->
                        <div class="navbar-right">
                            <ul class="nav navbar-nav">
                                <li class="active">@Html.ActionLink("Match", "Index", "Match")</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

问题答案：

下面的示例显示了如何具有您可能需要的几乎所有类型的“香草引导程序”
NAVBAR配置。它包括一个站点标题，向左或向右对齐的折叠和非折叠菜单项以及静态文本。请务必阅读评论，以更全面地了解您可以更改的内容。请享用！

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

  <div class="container">



    <!-- Title -->

    <div class="navbar-header pull-left">

      <a href="/" class="navbar-brand">GNOMIS</a>

    </div>



    <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->

    <div class="navbar-header pull-right">

      <ul class="nav pull-left">

        <!-- This works well for static text, like a username -->

        <li class="navbar-text pull-left">User Name</li>

        <!-- Add any additional bootstrap header items.  This is a drop-down from an icon -->

        <li class="dropdown pull-right">

          <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>

          <ul class="dropdown-menu">

            <li>

              <a href="/users/id" title="Profile">Profile</a>

            </li>

            <li>

              <a href="/logout" title="Logout">Logout </a>

            </li>

          </ul>

        </li>

      </ul>



      <!-- Required bootstrap placeholder for the collapsed menu -->

      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

      </button>

    </div>



    <!-- The Collapsing items            navbar-left or navbar-right -->

    <div class="collapse navbar-collapse navbar-left">

      <!--                      pull-right keeps the drop-down in line -->

      <ul class="nav navbar-nav pull-right">

        <li><a href="/news">News</a>

        </li>

        <li><a href="/Shop">Shop</a>

        </li>

      </ul>

    </div>



    <!-- Additional navbar items -->

    <div class="collapse navbar-collapse navbar-right">

      <!--                      pull-right keeps the drop-down in line -->

      <ul class="nav navbar-nav pull-right">

        <li><a href="/locator">Locator</a>

        </li>

        <li><a href="/extras">Extras</a>

        </li>

      </ul>

    </div>

  </div>

</nav>

从Bootstrap 3导航栏的崩溃中排除菜单项

相关阅读

相关文章

相关问答

相关工具

相关文档