使用 Bootstrap Less 加载 jQuery答案

【问题标题】：jQuery Load Using Bootstrap Less使用 Bootstrap Less 加载 jQuery
【发布时间】：2018-03-28 16:23:39
【问题描述】：

晚安！

几天前我问了一个问题，但没有得到解决方案：每当我使用 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，当在 load() 调用之前的 div 中没有任何反应时。

到目前为止，我正在使用 Bootstrap 的 CDN 来引用该框架。要修复它，我是否必须下载 Bootstrap 并找到这些 LESS 文件并将其删除？更重要的是，为什么这些 LESS 文件会覆盖所有内容？

【问题讨论】：

标签： jquery html css bootstrap-4

【解决方案1】：

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

只需添加：

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

在 css 文件或 <style> 标记中，将在引导后加载。

在此处了解有关初始属性的更多信息enter link description here。

【讨论】：

哎呀我猜我应该知道...哈哈...但是你知道为什么 JQuery 的 .load() 函数从 Bootstrap 的 .less 文件中获取吗？
jQuery 不能从引导程序中获取更少的内容。 LESS 需要先编译为 CSS，然后才能被浏览器解析……如果您没有浏览器端的 less 编译器，至少不需要。如果你有一个，你可能会知道，对吧？也许你有一些 *.map 文件（或类似的文件）在浏览器中指向更少的文件而不是 css，作为一般的代码源......如果是这样，删除地图文件应该导致浏览器指向 css 文件而不是/跨度>

【解决方案2】：

我有外部文件名 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>

【讨论】：