Html 从bootstrap 3导航栏的折叠中排除菜单项_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Html 从bootstrap 3导航栏的折叠中排除菜单项

html css twitter-bootstrap twitter-bootstrap-3

Html 从bootstrap 3导航栏的折叠中排除菜单项,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,这是我所做的，我试着在“品牌”内的我的部分移动，向右拉，在品牌外和折叠外，向左/向右拉，同时也试着在折叠部分之前或之后放置它当把它添加到品牌部分时，它是有效的，但它会延伸到一个新的产品线。我如何保持它在同一条线上 <body> <header> <nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 1

这是我所做的，我试着在“品牌”内的我的部分移动，向右拉，在品牌外和折叠外，向左/向右拉，同时也试着在折叠部分之前或之后放置它

当把它添加到品牌部分时，它是有效的，但它会延伸到一个新的产品线。我如何保持它在同一条线上

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


切换导航
@ActionLink（“经理”、“索引”、“玩家”）

@*@Html.ActionLink（“主页”、“索引”、“播放器”）
@Html.ActionLink（“匹配”、“索引”、“匹配”）


@ActionLink（“更改密码”、“管理密码”、“帐户”）
@ActionLink（“更新配置文件信息”、“更新配置文件”、“帐户”）
@ActionLink（“注销”、“注销”、“帐户”）




@Html.ActionLink（“匹配”、“索引”、“匹配”）

您应该能够在2

nav header

中使用

向左拉

和

向右拉

，以防止链接崩溃

见：


烙印



切换导航



更改密码
更新配置文件信息
注销

下面是一个示例，展示了如何拥有您可能需要的任何类型的“普通引导”导航栏配置。它包括站点标题、左对齐或右对齐的折叠和非折叠菜单项以及静态文本。请务必阅读评论，以便更全面地了解您可以更改的内容。享受吧

小提琴：

像往常一样，在左侧摆弄clearfix和扩展选项：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');


用户名









切换导航












这是我在Jade中的另一个答案，带有一些模板逻辑，只是为了好玩：）。有关更多信息，请参阅其他答案
//- NOTE:        'navbar-default' styles the 'burger' and navbar text color, so remove it to add your own
nav(class="navbar navbar-default navbar-fixed-top", role="navigation")
  .container

    //- Title
    .navbar-header.pull-left
      a.navbar-brand(href='javascript:window.location.replace(window.location.origin);') GNOMIS

    //- 'Sticky' (non-collapsing) right-side menu item(s) 
    .navbar-header.pull-right
      ul.nav.pull-left
        //- This works well for static text, maybe some initials
        li.navbar-text.pull-left User Name
        //- User Icon drop-down menu
        li.dropdown.pull-right
          a.dropdown-toggle(href='#', data-toggle='dropdown', style="color:#777; margin-top: 5px;")
            span.glyphicon.glyphicon-user
            b.caret
          ul.dropdown-menu
              li
                a(href="/users/id", title="Profile") 
                  | &nbsp;&nbsp;Profile
              li
                a(href="/logout", title="Logout")
                  | &nbsp;&nbsp;Logout 

      //- Required bootstrap placeholder for the collapsed menu    
      button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar

    //- The Collapsing items  navbar-left or navbar-right
    .collapse.navbar-collapse.navbar-left
      //-               pull-right keeps the drop-down in line
      ul.nav.navbar-nav.pull-right
        li
          a(href="/news") News
        li
          a(href="/shop") Shop

    //- Additional navbar items
    .collapse.navbar-collapse.navbar-right
      //-               pull-right keeps the drop-down in line
      ul.nav.navbar-nav.pull-right
        li
          a(href="/locator") Locator
        li
          a(href="/extras") Extras

请提供一些关于您的目标的详细信息，您试图实现的目标不清楚（显示所需布局的简单图片将非常有用）@zessx抱歉，刚才看到了这个。我的导航栏中有大约8个菜单项。有一个主菜单项，我希望无需单击导航栏上的下拉按钮即可访问，因为它是一个将在移动设备上大量使用的链接。因此，我不希望用户必须通过任何额外的“点击/触摸”才能进入该菜单项。下面的答案对我有用，我只需要做一些格式化，这样它就不会与下拉菜单按钮重叠。看起来很棒。看起来在它被折叠后有一点重叠。你知道如何解决这个问题吗（比如只在崩溃后添加一个边距？）。我想我已经试过了双头球，向左拉和向右拉，但可能不会同时拉。很好的回答！！！今晚下班回家后，我会尝试合并这些内容。@Skelly，回答得很好，真希望能更容易阅读格式糟糕的html@nomis哪部分格式不好？我对我的代码样式非常强迫症，觉得这是最简单的阅读方式……如果中的超过1，这就不起作用了。当你展开折叠的菜单项时，它会在标签顶部的左边显示这些项。回答得很好，评论也很有帮助。我有一个与此相关的后续问题：你必须有一个折叠部分吗？如果我只想要通过“hidden-”和“visible-”类控制可见性的静态项怎么办？@Andrew谢谢！我在引导菜单上做了一个深入的研究，我想我会和大家分享。不，你不需要任何折叠物品。任何带有导航栏标题的元素都不会折叠@nomis，这是可行的，但是你能解释一下为什么你需要在下拉标题中加上“页边空白：5px”吗？这已经被打破了。下面是一个基于a的工作示例
//- NOTE:        'navbar-default' styles the 'burger' and navbar text color, so remove it to add your own
nav(class="navbar navbar-default navbar-fixed-top", role="navigation")
  .container

    //- Title
    .navbar-header.pull-left
      a.navbar-brand(href='javascript:window.location.replace(window.location.origin);') GNOMIS

    //- 'Sticky' (non-collapsing) right-side menu item(s) 
    .navbar-header.pull-right
      ul.nav.pull-left
        //- This works well for static text, maybe some initials
        li.navbar-text.pull-left User Name
        //- User Icon drop-down menu
        li.dropdown.pull-right
          a.dropdown-toggle(href='#', data-toggle='dropdown', style="color:#777; margin-top: 5px;")
            span.glyphicon.glyphicon-user
            b.caret
          ul.dropdown-menu
              li
                a(href="/users/id", title="Profile") 
                  | &nbsp;&nbsp;Profile
              li
                a(href="/logout", title="Logout")
                  | &nbsp;&nbsp;Logout 

      //- Required bootstrap placeholder for the collapsed menu    
      button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar

    //- The Collapsing items  navbar-left or navbar-right
    .collapse.navbar-collapse.navbar-left
      //-               pull-right keeps the drop-down in line
      ul.nav.navbar-nav.pull-right
        li
          a(href="/news") News
        li
          a(href="/shop") Shop

    //- Additional navbar items
    .collapse.navbar-collapse.navbar-right
      //-               pull-right keeps the drop-down in line
      ul.nav.navbar-nav.pull-right
        li
          a(href="/locator") Locator
        li
          a(href="/extras") Extras