Question

我实现了1个逻辑菜单项 - 日期过滤器 - 作为3个Bootstrap导航栏项 - 上一个按钮，日期文本，下一个按钮。由于我使用Prev和Next的图标，所有这3个项目都可以在移动视图（水平模式）中适合单行。但是bootstrap将它们中的每一个都放到单行中，这使用了太多的空间并且不是很好。

有什么方法可以告诉Bootstrap将这3个项目视为单个项目并在移动视图中将它们放在单行上（但保持当前的焦点行为，即每个按钮分别突出显示，文本在焦点上不突出显示）？

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li><p class="navbar-text">today</p></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
        </ul>
    </div><!--/.navbar-collapse -->
</div>

现实生活中的示例部署在http://odpad-praha8.rhcloud.com/中，因此您也可以在那里查看。我正在使用最新的Bootstrap 3。

Answer 1

在您的商品上添加自定义.inline课程，并使用以下代码：

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="disabled inline"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li class="inline"><p class="navbar-text">today</p></li>
            <li class="inline last-inline"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
            <li><a href="#">Another link</a></li>
            <li><a href="#">Another link</a></li>
        </ul>
    </div><!--/.navbar-collapse -->
</div>

@media (max-width: 768px) {

  ul.navbar-nav li.inline {
    float: left; // make .inline items to float on mobile
  }
  ul.navbar-nav li.last-inline + li {
    clear: both; // avoid next item to float
  }
  ul.navbar-nav li.inline a { // fix broken padding
    padding-top: 15px;
    padding-bottom: 15px;
  }

}

Bootply

Answer 2

您可以使用自定义媒体查询来执行此操作。

<强>例如

@media (max-width: 768px) {

ul.navbar-nav, ul.navbar-nav li {
  display:inline
}

}

如果您需要左右两侧，也可以使用float。

在移动设备的单行上有2个导航栏项目的Bootstrap

2 个答案: