Bootstrap和LESS。導航欄不起作用

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">

CSS LESS文件中的Navbar內容

.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

如果你正在使用respond.js，你可能會遇到一些問題。 http://bootstrapdocs.com/v3.0.3/docs/getting-started/#disable-responsive

Bootstrap和LESS。導航欄不起作用

問題描述

1 個解決方案

解決方案1
0 2015-02-22 06:14:40

Bootstrap和LESS。 導航欄不起作用

問題描述

1 個解決方案

解決方案1 0 2015-02-22 06:14:40

Bootstrap和LESS。導航欄不起作用

解決方案1
0 2015-02-22 06:14:40