Question

使用Twitter引导程序是否有最好的做法是在导航栏中包含永久固定的项目（即使在移动设备上）和其他崩溃的项目。当我尝试在移动设备上删除折叠间距之外的项目。我可以手动添加一个css规则，但我想可能有一种内置的方法来处理这个问题。非常感谢您的建议。

移动（有间距问题）：
enter image description here

HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <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" href="#">My App</a>
            <div id="timer" class="navbar-text glyphicon glyphicon-time"><a href="#"></a></div>
            <div id="items-due" class="navbar-text glyphicon glyphicon-pencil"></div>
            <div id="add-button" class="navbar-text glyphicon glyphicon-plus-sign"></div>
            <div id="audio-button" class="navbar-text glyphicon glyphicon-volume-off"></div>
            <div id="info-button" class="navbar-text glyphicon glyphicon-info-sign"></div>
            <div id="back-button" class="navbar-text glyphicon glyphicon-backward"></div>
            <div id="next-button" class="navbar-text glyphicon glyphicon-forward"></div>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li id="forums-button"><a href="#">Forums</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

那么回顾一下，在移动显示器上使导航栏项目不崩溃且间隔适当的最佳方法是什么？

Answer 1

由于您有图标链接，因此您可以将它们放在navbar-nav list-inline内的navbar-header内，就像这样..

      <div class="navbar-text">   
              <ul class="navbar-nav list-inline">
              <li>
                <a href="#"><span id="timer" class="glyphicon glyphicon-time"></span></a>
              </li>
             ..
              <li>
                <a href="#"><span class="glyphicon glyphicon-forward"></span></a>
              </li>
              </ul>
      </div>

http://bootply.com/99011

通常，要从崩溃中排除菜单项，只需将它们放在navbar-collapse。

之外

Answer 2

我创建了一个较少的片段，即使在小屏幕尺寸上也可以使非折叠导航栏项目成为可能：

.navbar {
    // use this class instead of .collapse .navbar-collapse for the div surrounding the navbar items that should not collapse
    .no-collapse {
        @media (max-width: @grid-float-breakpoint-max) {
            .navbar-nav {
                margin-top: -@navbar-height;
                margin-bottom: 0;
                &.navbar-right {
                    float: right;
                    // summed up width and padding of .navbar-toggle elements
                    padding-right: 2*@navbar-padding-horizontal + 19px + 22px;
                }
                & .open {
                    .dropdown-menu {
                        .dropdown-menu();
                        display: block;
                        margin-top: 0;
                        .border-top-radius(0);
                    }
                }
            }
            li {
                display: inline-block;
                float: left;
                > a {
                    padding-top:    @navbar-padding-vertical;
                    padding-bottom: @navbar-padding-vertical;
                }
            }
        }
    }
}

您必须在构建环境中包含bootstrap less-files，以便能够使用mixins和变量。

有了这个，你可以在导航栏中添加一个div class="no-collapse"和折叠div：

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">

            <div class="no-collapse">
                <!--...-->
            </div>

            <div class="collapse navbar-collapse">
                <!--...-->
            </div>
        </div>
    </nav>

在div中你可以添加一个带有任何li元素和下拉列表的ul列表，就像你使用常规折叠导航栏元素一样。

非折叠项目twitter bootstrap navbar

2 个答案: