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

Posted 2023-04-13

【中文标题】用于响应式导航的引导分隔符

【英文标题】：bootstrap divider for responsive navigation

【发布时间】：2013-01-06 20:04:32

【问题描述】：

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

我想在最后两个菜单项之间添加一个分隔符，即“链接”和“下拉”菜单项。如果我添加以下<li class='divider></li>'

在它们之间，它不起作用。还有其他引导方法吗？或者我们需要创建自己的类来在响应式网格中实现这一点？

【参考方案1】：

您必须编写如下@media 查询：See Divider in Browser- Resize browser to checkJSFiddle with Divider in collapsible nav

 /* 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;
  
  

【参考方案2】：

为什么不<hr> 或<legend></legend>？

<li class = ""></li>
<li class = ""></li>
<div class = "visible-phone">
<legend></legend>
</div>
<li class = ""></li>
<li class = ""></li>

【讨论】：

你能详细说明一下吗？