个人中心
gpt4 book ai didi

html - Bootstrap 和 LESS。导航栏不起作用

转载 作者：行者123 更新时间：2023-11-28 08:23:09 26 4
gpt4 key购买 nike

所以我使用的是 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 文件中导航栏的 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>

最佳答案

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

关于html - Bootstrap 和 LESS。导航栏不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28654902/

26 4 0
文章推荐： javascript - 电话间隙 : Back button not working
文章推荐： html - 应用于 TD 时垂直虚线边框不均匀
文章推荐： javascript - 如何使用 jQuery 在用户选择的文本行中的 <textarea> 末尾添加图像
文章推荐： html - 为其他监视器缩放 CSS