zoukankan      html  css  js  c++  java
  • Bootstrap导航栏头部错位问题

    代码:

     1 <section class="header">
     2     <div class="container">
     3         <div class="row">
     4             <div class="col-sm-12">            
     5                 <div class="navbar navbar-default" role="navigation">
     6                     <div class="navbar-header">
     7                         <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-responsive-collapse">
     8                             <span class="sr-only">Toggle Navigation</span>
     9                             <span class="icon-bar"></span>
    10                             <span class="icon-bar"></span>
    11                             <span class="icon-bar"></span>
    12                         </button>
    13                         <a href="javascript:void(0);" class="navbar-brand"><span class="glyphicon glyphicon-bold"></span><span class="glyphicon glyphicon-font"></span></a>
    14                    </div>
    15                     <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
    16                         <ul class="nav navbar-nav">
    17                             <li class=""><a href="javascript:void(0);">首页</a></li>
    18                             <li class="dropdown active">
    19                                 <a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">备案主表<span class="caret"></span></a>
    20                                 <ul class="dropdown-menu">
    21                                     <li class=""><a href="javascript:void(0);" onclick="loadInfo('main','',0,1);">所有数据</a></li>
    22                                     <li class="divider"></li>
    23                                     <li><a href="javascript:void(0);" onclick="loadInfo('main',0,0,1);">待更新(status-0)</a></li>
    24                                     <li class="divider"></li>
    25                                     <li><a href="javascript:void(0);" onclick="loadInfo('main',1,0,1);">审核通过(status-1)</a></li>
    26                                     <li class="divider"></li>
    27                                     <li><a href="javascript:void(0);" onclick="loadInfo('main',2,0,1);">数据异常(status-2)</a></li>
    28                                     <li class="divider"></li>
    29                                     <li><a href="javascript:void(0);" onclick="loadInfo('main',4,0,1);">不存在(status-4)</a></li>
    30                                     <li class="divider"></li>
    31                                     <li class="disabled"><a href="javascript:void(0);" onclick="loadInfo('main',3,0,1);">已删除(status-3)</a></li>
    32                                 </ul>
    33                             </li>
    34                             <li><a href="javascript:void(0);">短信详情</a></li>
    35                             <li><a href="javascript:void(0);">文档</a></li>
    36                             <li><a href="javascript:void(0);">日志</a></li>
    37                         </ul>
    38                         <form action="##" class="navbar-form navbar-left" rol="search">
    39                             <div class="form-group">
    40                                <input type="text" class="form-control" placeholder="请输入关键词" />
    41                             </div>
    42                             <button type="submit" class="btn btn-default">搜索</button>
    43                         </form>
    44                     </div>    
    45                 </div>
    46             </div>
    47         </div>
    48     </div>        
    49 </section>

    导致间距不同的不是什么代码问题,而是空格问题。原代码<div class="navbar navbar-default" role="navigation">的后面,<div class="navbar-header">前面有2个空格,删掉后错位就消失了。看来还得使用Tab而不是空格来缩进。

  • 相关阅读:
    基础算法(C#)
    Mac系统Docker安装Redis
    Mac系统Docker安装jenkins
    设计模式-缓存驻留模式
    设计模式列表
    vs问题---...inDebugJns.Gaea.dll”标记为系统必备组件,必须对其进行强签名。
    vs问题--------------标记为系统必备组建
    Excel--------Excel实现数据对比
    IIS--------问题解决(.net开发中localhost可以访问,本地ip不可以)
    .NET--------枚举扩展方法(枚举转list,获取枚举描述)
  • 原文地址:https://www.cnblogs.com/mazey/p/6624394.html
Copyright © 2011-2022 走看看