Question

所以我使用的是v3.3.2。我用LESS来模仿我的模板。我遇到了一个奇怪的问题。当我包含less.js文件时，导航栏不起作用。没有它它完美地工作。两者是否存在兼容性问题。

下面我发布了代码。它只是一个带有固定导航栏和文本内容的基本页面

<body>
<!-- Navigation Bar Starts -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation"> 
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbar-collapse-1" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a href="#" class="navbar-brand">Company Name</a> </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav navbar-left text-right">
      <li><a href="#">Products</a></li>
      <li><a href="#">Research</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact US</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Members</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse --> 
</nav>
<!-- Navigation Bar Ends -->

包含更少的文件

<script src="js/less.min.js" type="text/javascript"></script>
<link href="css/style.less" rel="stylesheet/less" type="text/css">

LESS文件中的Navbar的CSS内容

.navbar-custom {
  background-color: @ColorFirst;
  border-color: #566b5b;
  padding-right: 10px;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.55);
}
.navbar-custom .navbar-brand {
  color: #ffffff;
  position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    float:none;

    height: 80px;
}

任何帮助??

修改

包含文件的顺序

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.less" rel="stylesheet/less" type="text/css">

并在页面底部

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/less.min.js" type="text/javascript"></script>
</body>
</html>

Answer 1

如果您使用的是response.js，则可能会遇到一些问题。 http://bootstrapdocs.com/v3.0.3/docs/getting-started/#disable-responsive

Bootstrap和LESS。导航栏不起作用

1 个答案: