CDN 和本地引导 CSS 渲染不同答案

【问题标题】：CDN and Local bootstrap CSS Render DifferentlyCDN 和本地引导 CSS 渲染不同
【发布时间】：2020-12-31 20:28:58
【问题描述】：

我有一个应用程序在将 CDN 用于引导文件时加载得很好。如果我从链接中的 URL 下载文件并在本地加载它们，除了 bootstrap.css 之外，它们似乎都可以正常工作。引导样式肯定会加载，但选择框会全屏显示（我不想要），从 CDN 加载时不会这样做。我需要本地的所有文件。为什么 CDN 的 CSS 的本地副本表现不同？我该如何解决这个问题？

澄清，如果我使用

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />

它不能正确渲染，但如果我使用

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

它确实呈现正确。下面有问题的 HTML sn-p：

        <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap-reboot.css" type="text/css" />
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js"></script>
        <!-- Styling -->
        <link rel="stylesheet" href="css/Project.css" type="text/css" />
...
    <div id="container" class="container">
                <div id = "controls-holder" class="row">
                    <div id="team-selector" class="col-sm-3">
                        <select id="team-select" class="form-control">
                            <option>Choose...</option>   
                        </select>
                    </div>
                    <div id="team-tab-selector" class="col-sm-5">
                        <ul class="nav nav-tabs">
                          <li class="active nav-item nav-link" id="nav-item-x">y</li>
                          <li class="nav-item nav-link" id="nav-item-y">y</li>
                        </ul>
                    </div>
                    <div id="controls-links" class="col-sm-4">
                        <span class=>Links
                            <button type="button" id="link-one-btn" class="btn btn-primary btn-sm mr-2">Primary</button>
                            <button type="button" id="link-two-btn" class="btn btn-secondary btn-sm">Secondary</button>
                        </span>

                    </div>    
                </div>
...
</div>

【问题讨论】：

不可能，请看你的CDN和本地文件版本是否匹配
这就是我感到困惑的原因。我将stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/… 放在我的浏览器中，保存文件，用我的问题中的链接标记将我的html 指向它，它的呈现方式不同。
奇怪但不可能，我认为它的特殊性，某些属性被您的 CSS 覆盖，请检查
唯一可以覆盖的方法是通过竞争条件。我将添加有问题的html sn-p。

标签： bootstrap-4

【解决方案1】：

您可以使用 nodejs 将引导 CSS 和 JS 导入您的项目。

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {

    browserSync.init({
        server: "./src"  
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
    gulp.watch("src/*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.parallel('js','serve'));

【讨论】：

我在这里尝试使用预编译的引导程序。我的 boostrap.css 和 boostrap.js 存在于静态 HTML 中。
drive.google.com/drive/folders/… 你可以试试我的文件。
我在使用您的文件时仍然遇到问题。我想知道是否发生了一些奇怪的比赛条件。从 CDN 加载我看到它使用@media，而当我在本地加载它时我没有。它为容器提供了不同的最大宽度。我已经设法将所有内容强制到需要的位置。就像它忽略了“col-sm-x”中的 x。我还是不知道为什么会这样。

【解决方案2】：

所以，我遇到了同样的问题。这就是我所做的。

我正在学习 Flask，并且正在学习 Corey Shafer 的教程。我遇到了同样的问题，所以这对我有用。我在与我的 python 脚本相同的目录中创建了一个 static 文件夹。我将bootstrap.css 文件放在那里并用这一行调用它：

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap.css') }}">

要记住一件事，如果您使用 Flask，请确保在 Python 脚本中从 Flask 导入 url_for：

from flask import url_for

希望这对你的朋友有所帮助。

【讨论】：