Question

我想在移动设备上查看时在折叠导航中添加分隔符。理想情况下，导航看起来与未折叠时的导航看起来完全相同，但折叠时在“关于”和“登录”之间会有一个分隔符。

以下是导航的代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
        <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="#">Company</a>
    </div>
    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Log In</a></li>
        <li><a href="#">Sign Up</a></li>
      </ul>
    </div>
  </div>
</nav>

JSFiddle

我尝试在需要分隔符的地方添加<li role="separator" class="divider"></li>，但它没有显示：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
        <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="#">Company</a>
    </div>
    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li role="separator" class="divider"></li>
        <li><a href="#">Log In</a></li>
        <li><a href="#">Sign Up</a></li>
      </ul>
    </div>
  </div>
</nav>

JSFiddle

如何为折叠导航添加分隔符？

希望这个分隔符看起来非常类似于导航中的下拉列表：

Answer 1

它没有显示，因为它在Bootstrap css中定义如下：

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

您在.divider

下没有.dropdown-menu

你应该做什么？

@media (max-width:767px){
  .divider {
        height: 1px;
        margin: 9px 0;
        overflow: hidden;
        background-color: #e5e5e5;
    }
}

Answer 2

在Bootstrap v4.0.0-alpha.6中，您可以使用

<div class="dropdown-divider"></div>

jsFiddle

Answer 3

您必须输入以下代码：

<li role="separator" class="divider"></li>

你自己的＆＃34;＆lt; li＆gt;＆＃34;标签

示例：

<ul class="dropdown-menu" aria-labelledby="drop2">
  <li> Your own Li Tags</li>
  <li> Your own Li Tags</li>
  <li> Your own Li Tags</li>
  <li role="separator" class="divider"></li>
  <li> Your own Li Tags</li>
  <li> Your own Li Tags</li>
</ul>

Answer 4

您可以插入

<hr>

标记而非分隔符like this：

    <ul class="nav navbar-nav navbar-right">
        <hr>            
        <li><a href="#">Log In</a></li>
        <li><a href="#">Sign Up</a></li>
    </ul>

请告诉我它是否符合您的要求。

Answer 5

如果您不想触摸CSS，那么它几乎没有黑客攻击：D。而不是

SELECT
t.trip_date,
c1.location_name AS 'trip_start',
c2.location_name AS 'trip_end',
t.km_start,
t.km_end
FROM km_trips t
LEFT JOIN km_locations c1 ON c1.location_id = t.start_location_id
LEFT JOIN km_locations c2 ON c2.location_id = t.end_location_id
WHERE t.trip_date BETWEEN '2016-02-06' AND '2016-03-10'
ORDER BY t.trip_date ASC, t.km_start ASC

使用此

id     date     trip_start      trip_end        km_start    km_end  total_trips
1   2016-02-15  Home            Grocery Store   10675       10681   8
2   2016-02-15  Grocery Store   Gas Station     10681       10684
3   2016-02-15  Gas Station     Home            10684       10689   5
4   2016-02-16  Home            Grocery Store   10689       10695   9
5   2016-02-16  Grocery Store   Home            10695       10701
6   2016-02-17  Home            School          10701       10723   12
7   2016-02-17  School          Grocery Store   10723       10739
8   2016-02-17  Grocery Store   Friends House   10739       10755
9   2016-02-17  Friends House   Home            10755       10767   7
10  2016-02-18  Home            Friends House   10767       10783   8
11  2016-02-18  Friends House   Home            10755       10767
12  2016-02-19  Home            Friends House   10767       10783   9
13  2016-02-19  Friends House   Grocery Store   10783       10792
14  2016-02-19  Grocery Store   Home            10792       10798   10

Bootstrap在折叠时在顶部和底部提供表单1px边框。您可以使用此方法并插入空格式，该格式在展开时不可见，但在折叠时具有一个边框。

Answer 6

Boostrap 4.1解决方案

试图在BS4.1 Navbar组件中实现此目标，并最终在这里（通过Google）。由于.divider在此版本中不存在，因此我使用<hr>来获得所需的结果...

<ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#generator">Social Links</a></li>
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/facebook-link-generator/#opengraph-generator">Open Graph</a></li>
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/twitter-link-generator/#twitter-card-generator">Twitter Cards</a></li>
    <li class="nav-item"><a class="nav-link" href="/json-ld-generator#json-ld-generator">JSON-LD</a></li>
    <li class="nav-item"><hr class="border-top"></li>
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#donation">Feeling Generous?</a></li>
    <li class="nav-item"><a class="nav-link" href="https://www.sociallinkgenerator.com/#contact">Need a Developer?</a></li>
</ul>

奖金：此<hr>不会影响扩展显示，因为它的边距将其放在下一个.nav-item元素后面：）

注意：.border-top已添加到<hr>中，以使颜色更浅。

在Collapsed Nav Bootstrap中添加分隔符

6 个答案:

Boostrap 4.1解决方案