用于响应式导航的bootstrap分隔符

Question

我想在响应式导航上添加水平分隔线.这是移动设备上的bootstrap响应视图.

我想在最后两个菜单项之间添加一个分隔符,即"链接"和"下拉"菜单项.如果我添加以下内容<li class='divider></li>'

在他们之间,它不起作用.有没有其他引导方式来做到这一点？或者我们需要创建自己的类来实现响应网格？

Answer 1

您将不得不编写如下的@media查询:
请参阅浏览器中的分隔符- 调整浏览器以在可折叠导航中检查
JSFiddle与Divider

 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 979px) {
    .nav-collapse .nav > li.divider {
    *width: 100%;
    height: 1px;
    margin: 9px 1px;
   *margin: -5px 0 5px;
    overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
     }
     }
 @media (min-width: 600px){
   .nav-collapse .nav > li.divider {
    *width: 100%;
    height: 1px;
    margin: 9px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
  }
  }
 /* Landscape phones and down */
  @media (max-width: 480px) {
   .nav-collapse .nav > li.divider {
   *width: 100%;
   height: 1px;
   margin: 9px 1px;
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid #ffffff;
  }
  }