使用引导的jQuery加载较少

几天前我问了一个问题，无法获得解决方案：无论何时我使用jQuery的.load（）调用来抓取我的目录中的另一个.HTML页面，为什么很多内容会出现怪异并没有正确格式化，但像Bootstrap的按钮正确显示？

那么我做了一些更多的挖掘，我发现究竟发生了什么，但不知道为什么或什么。当使用jQuery load()这样的：

$("#mainmenu").load("ready.html");

得到另一个HTML网页加载到一个名为mainmenu DIV，我发现了一些内容得到由grid-framework.less:18改变：

.row { 
    /* margin-right: -15px; */ 
    /* margin-left: -15px; */ 
}

随着一些H1/H2标签从Bootstrap与其他人分享type.less。这些LESS调用都覆盖了我的CSS文件和常规普通老Bootstrap，当在div之前调用load()时什么都没有发生。

截至目前，我正在使用Bootstrap的CDN来引用框架。要解决它，我必须下载Bootstrap并找到这些LESS文件并删除它？更重要的是，为什么这些LESS文件压倒一切？

来源

2017-10-17 rezey

我有外部文件名ready.html从即时通讯到我的id =“MainMenu的”
为了使该代码运行读取数据和加载，只需添加html页面名称ready.html在您的项目，从添加全文：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <!-- Theme Made By www.w3schools.com - No Copyright --> 
 
    <title>Bootstrap Theme Simply Me</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $('#get').on('click', function() { 
 
       $('#mainmenu').load('ready.html'); 
 
      }); 
 
     }); 
 
    </script> 
 

 

 
    <style> 
 
     body { 
 
      font: 20px Montserrat, sans-serif; 
 
      line-height: 1.8; 
 
      color: #f5f6f7; 
 
     } 
 

 
     p { 
 
      font-size: 16px; 
 
     } 
 

 
     .margin { 
 
      margin-bottom: 45px; 
 
     } 
 

 
     .bg-1 { 
 
      background-color: #1abc9c; /* Green */ 
 
      color: #ffffff; 
 
     } 
 

 
     .bg-2 { 
 
      background-color: #474e5d; /* Dark Blue */ 
 
      color: #ffffff; 
 
     } 
 

 
     .bg-3 { 
 
      background-color: #ffffff; /* White */ 
 
      color: #555555; 
 
     } 
 

 
     .bg-4 { 
 
      background-color: #2f2f2f; /* Black Gray */ 
 
      color: #fff; 
 
     } 
 

 
     .container-fluid { 
 
      padding-top: 70px; 
 
      padding-bottom: 70px; 
 
     } 
 

 
     .navbar { 
 
      padding-top: 15px; 
 
      padding-bottom: 15px; 
 
      border: 0; 
 
      border-radius: 0; 
 
      margin-bottom: 0; 
 
      font-size: 12px; 
 
      letter-spacing: 5px; 
 
     } 
 

 
     .navbar-nav li a:hover { 
 
      color: #1abc9c !important; 
 
     } 
 
    </style> 
 
</head> 
 
<body id="mainmenu"> 
 
    <button type="button" style="color:black" id="get">show ready.html</button> 
 
     <!-- Navbar --> 
 
     <nav class="navbar navbar-default"> 
 
      <div class="container"> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
        <a class="navbar-brand" href="#">Me</a> 
 
       </div> 
 
       <div class="collapse navbar-collapse" id="myNavbar"> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
         <li><a href="#">WHO</a></li> 
 
         <li><a href="#">WHAT</a></li> 
 
         <li><a href="#">WHERE</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav> 
 

 
     <!-- First Container --> 
 
     <div class="container-fluid bg-1 text-center"> 
 
      <h3 class="margin">Who Am I?</h3> 
 
      <img src="bird.jpg" class="img-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350"> 
 
      <h3>I'm an adventurer</h3> 
 
     </div> 
 

 
     <!-- Second Container --> 
 
     <div class="container-fluid bg-2 text-center"> 
 
      <h3 class="margin">What Am I?</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
 
      <a href="#" class="btn btn-default btn-lg"> 
 
       <span class="glyphicon glyphicon-search"></span> Search 
 
      </a> 
 
     </div> 
 

 
     <!-- Third Container (Grid) --> 
 
     <div class="container-fluid bg-3 text-center"> 
 
      <h3 class="margin">Where To Find Me?</h3><br> 
 
      <div class="row"> 
 
       <div class="col-sm-4"> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
        <img src="birds1.jpg" class="img-responsive margin" style="width:100%" alt="Image"> 
 
       </div> 
 
       <div class="col-sm-4"> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
        <img src="birds2.jpg" class="img-responsive margin" style="width:100%" alt="Image"> 
 
       </div> 
 
       <div class="col-sm-4"> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
        <img src="birds3.jpg" class="img-responsive margin" style="width:100%" alt="Image"> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Footer --> 
 
     <footer class="container-fluid bg-4 text-center"> 
 
      <p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p> 
 
     </footer> 
 

 
</body> 
 
</html>

来源

2017-10-17 06:01:38

您不需要下载少嘘的版本用tstrap编辑一小部分代码。你可以使用简单的css来修改这些东西，而不用担心其他任何事情。我建议在你的情况下使用初始属性。这会将行的边距值恢复为默认值。

只需简单地添加：

.row { 
    margin-right: initial; 
    margin-left: initial; 
}

在CSS文件或 <style>标签

，将加载引导了。

查看更多关于初始属性在这里enter link description here。

来源

2017-10-17 06:33:37 Luke

哎呦我应该知道我猜...哈哈...但你知道为什么JQuery的.load（）函数需要从Bootstrap的无文件吗？ – rezey

jQuery不能从bootstrap中减少。在浏览器解析之前，需要将LESS编译为CSS ...至少在浏览器端没有少量编译器的情况下不会。如果你有一个你可能会知道的，对吧？也许你有一些* .map文件（或类似的东西），它指向浏览器中的较少文件而不是css，作为一般的代码源......如果是这样，删除映射文件应该导致浏览器指向css文件 – Luke

使用引导的jQuery加载较少

回答

相关问题