css - Bootstrap 在移动设备的一行中有 2 个导航栏元素

Question

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

有什么方法可以告诉 Bootstrap 将这 3 个元素视为单个元素并将它们放在移动 View 中的一行中(但保持当前的焦点行为，即每个按钮单独突出显示并且文本不在焦点上突出显示)？

<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