包含bootstrap.min.css时，不会显示引导弹出窗口 [英] Bootstrap popup does not appear when include bootstrap.min.css
问题描述
我使用CSS时遇到问题，因为我刚接触这个。我正在使用引导弹出窗口，如下所示。当我点击'全规格'按钮时，弹出框会出现。
但是，现在文件 bootstrap.min.css 似乎成了问题。如果我在我的代码中包含bootstrap.min.css，则弹出框不会出现。如果我没有包含该文件，弹出框会出现，但我的图像，文本和其他文件的对齐，大小会发生变化。
有没有办法让我的弹出框出现而不会干扰图像/文本的对齐和大小？我试过改变bootstrap.min.css中的代码，但它很难，因为我需要从左到右滚动它，而不是从顶部到底部。
请帮助我解决了我的问题。谢谢！
< HEAD>
< meta charset =utf-8>
< link rel =icontype =image / icohref =favicon.ico>
< title>测试< /标题>
< meta name =descriptioncontent =>
< meta name =viewportcontent =width = device-width>
< link rel =stylesheethref =css / bootstrap.min.css>
< link rel =stylesheethref =css / font-awesome.css>
< link rel =stylesheethref =css / animate.css>
< link rel =stylesheethref =css / templatemo_misc.css>
< link rel =stylesheethref =css / bootstrap.css>
< script src =js / vendor / modernizr-2.6.1 -response-1.1.0.min.js>< / script>
< script src =js2 / jquery.jstype =text / javascript>< / script>
< script src =js2 / bootstrap.jstype =text / javascript>< / script>
< / head>
我建议您不要直接在 bootstrap.min.css 文件中更改代码。如果你想在未来使用相同的类，或者更新你的Bootstrap版本，该怎么办？相反，您可以在自定义CSS文件中覆盖所需的类，然后在Bootstrap之后添加自定义CSS文件，如下所示：
< HEAD>
< link rel =stylesheettype =text / csshref =bootstrap.min.css>
< link rel =stylesheettype =text / csshref =custom.css>
< / head>
如果在两个CSS文件中都有相同名称的类，那么最新的CSS将覆盖任何类定义在前面的CSS中。
我也试过包括 bootstrap.min.css 和 bootstrap.css 在我当前的应用程序中，并且注意到它完全改变了样式。然后，我自己尝试了每个样式表，并注意到在我的页面布局中存在更大的差异，因此它们的曲线应该是相同的（两者都是3.3.5版本），因此我在曲面球中投掷了这些差异。如果还没有，请尝试单独使用每个样式表来查看页面布局是否更改。如果是这样，也许你使用了两个不同版本的Bootstrap。
$ b
bootstrap.min.css 和 bootstrap.css 应为效果。 .min 代表缩小并用于制作，而另一个文件则用于开发。也许我错过了最新版本的Bootstrap，但是这两个文件之间不应该有任何代码差异;这些类应该是相同的。
与此同时，如果没有人有更好的答案，我建议您坚持您使用的Bootstrap版本开始，这听起来像是它的未经版本化的版本。
编辑：也值得注意的是，覆盖类只会影响您指定的属性。例如，请参阅以下课程：
h1 {
color：orange;
背景颜色：黑色;
}
这个类重写它：
h1 {
颜色：红色;
$ b $ p
$ b 唯一改变的属性是颜色属性，而其他属性仍然适用到 h1 元素。因此，不要在黑色背景上显示橙色标题，而应在黑色背景上显示红色标题。
I'm having problem using CSS as I'm new to this. I'm currently using the bootstrap popup, example as below. When I click on the 'Full Spec' button, the popup box will appear.
However, the file bootstrap.min.css seems to be the problem now. If I include bootstrap.min.css in my code, the popup box won't appear. And I if did not include that file, the popup box will appear, but the alignment, size of my images, text and others changes.
Is there a way so that my popup box would appear without disturbing the alignment and size of the image/text? I've tried changing the code in bootstrap.min.css but its kinda hard as I need to scroll it from left to right instead of top to bottom.
Please help me solve my problem. Thanks!
<head>
<meta charset="utf-8">
<link rel="icon" type="image/ico" href="favicon.ico">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/templatemo_misc.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
<script src="js2/jquery.js" type="text/javascript"></script>
<script src="js2/bootstrap.js" type="text/javascript"></script>
</head>
解决方案 I recommend that you not change the code directly in the bootstrap.min.css file. What if you want to use the same classes in the future, or update your version of Bootstrap? Instead, you can override the class(es) that you want in a custom CSS file, and then add your custom CSS file after the Bootstrap one, like so:
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
If there are any classes with the same name in both CSS files, the latest CSS will override any classes defined in the previous CSS.
I've also tried including both bootstrap.min.css and bootstrap.css in my current application, and noticed that it changes the style completely. Then, I tried each stylesheet on its own, and noticed that there were even more drastic differences in my page layout, which threw me for a curveball, because the styles should be the same (both are version 3.3.5). If you haven't already, try using each stylesheet on its own to see if the layout of your page changes. If it does, maybe you are using two different versions of Bootstrap.
The only difference between bootstrap.min.css and bootstrap.css should be performance. .min stands for minified and is used in production, whereas the other file is used in development. Maybe there is something I am missing about the most recent version of Bootstrap, but there shouldn't be any code differences between the two files; the classes should be the same.
In the meantime, if no one has a better answer, I recommend you stick with the version of Bootstrap that you have been using from the start, which sounds like its the unminified version.
EDIT: It's also worth noting that overriding a class only affects the properties that you specify. For example, take this class:
h1 {
color: orange;
background-color: black;
}
And this class to override it:
h1 {
color: red;
}
The only property that changes is the color property, and the other property still apply to h1 elements. So instead of having an orange heading with a black background, you will have a red heading with a black background.
这篇关于包含bootstrap.min.css时，不会显示引导弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
