Bootstrap popup does not appear when include bootstrap.min.css

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/32230679/bootstrap-popup-does-not-appear-when-include-bootstrap-min-css

标签

html

css

twitter-bootstrap

popup