IE8-Problem mit Twitter Bootstrap 3

Ich erstelle eine Site mit dem neuen Twitter Bootstrap. Die Site sieht gut aus und funktioniert in allen erforderlichen Browsern außer IE8.

In IE8 werden anscheinend Elemente der mobilen Version angezeigt, die sich jedoch über den gesamten Bildschirm meines Desktops erstrecken. Ich glaube, das Problem, das ich habe, ist, dass Twitter Bootstrap zuerst mobil ist. Aus irgendeinem Grund wird IE8 diese Option wählen.

Ich stelle auch fest, dass die containerKlasse die CSS-Eigenschaften mit maximaler Breite nicht wie beabsichtigt einzieht. Kann jemand sehen, was ich falsch gemacht habe?

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

Sie haben Ihr CSS von CDN (bootstrapcdn.com) erhalten. Response.js funktioniert nur für lokale Dateien. Probieren Sie Ihre Website auf IE8 mit einer lokalen Kopie von bootstrap.css aus. Oder lesen Sie: CDN / X-Domain Setup

Hinweis Siehe auch: https://github.com/scottjehl/Respond/pull/206

Aktualisieren:

Bitte lesen Sie: http://getbootstrap.com/getting-started/#support

Darüber hinaus erfordert Internet Explorer 8 die Verwendung von reply.js, um die Unterstützung von Medienabfragen zu aktivieren.

Siehe auch: https://github.com/scottjehl/Respond

Aus diesem Grund enthält die Basisvorlage die folgenden Zeilen im Kopfbereich:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

Ich musste auch das folgende META-Tag setzen:

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

Ich hatte das gleiche Problem beim Übergang von Bootstrap 2 zu 3. Ich hatte bereits reply.js und html5shiv.js und habe mein Meta auf edge gesetzt. Ich hatte übersehen, dass sich der Navbar-Elementtyp von 2 auf 3 geändert hatte. In Bootstrap 2 war es nav. In Bootstrap 3 ist es jetzt Header. Um das Problem vollständig zu lösen, musste ich

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Stellen Sie dies richtig, nachdem ich mein CSS geladen hatte:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

und dann ändern

<nav class="navbar" role="navigation">
</nav>

zu

<header class="navbar" role="navigation">
</header>

Oh und zum guten Teil habe ich auch hinzugefügt

<meta name="viewport" content="width=device-width, initial-scale=1.0">

einfach, weil es das ist, was die Bootstrap-Site selbst hat.

In meinem Fall verursachte das Bootstrap-minimierte CSS das Problem. Um Bootstrap 3.0.2 in IE8 (emuliert mit den F12 Developer Tools) ansprechbar zu machen, musste ich:

1 - Setzen Sie das X-UA-kompatible Flag.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2 - Verwenden Sie anstelle von bootstrap.min.css die nicht minimierte Datei bootstrap.css

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

3 - Fügen Sie die Datei reply.js (und html5shiv.js) hinzu.

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

Fügen Sie respond.jsam Ende der Seite, aber bevor Sie das bodyTag schließen, den Link zu respond.jsdiesem Code ein und führen Sie ihn in Ihrem lokalen Host aus.

https://github.com/scottjehl/Respond

Nur für den Fall. Stellen Sie sicher, dass Sie die IE-spezifischen JS-Dateien laden, nachdem Sie Ihre CSS-Dateien geladen haben.

Vergessen Sie nicht, Ihre CSS-Links in das <head>zu setzen, respond.jsdas nur diese nimmt.

Wie bereits erwähnt, gibt es zwei verschiedene Probleme: 1) IE8 unterstützt keine Medienabfragen. 2) reply.js, die in Verbindung mit domänenübergreifenden CSS-Dateien verwendet werden, müssen wie zuvor beschrieben enthalten sein.

Wenn Sie BootstrapCDN verwenden möchten, finden Sie hier ein funktionierendes Beispiel:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://stackoverflow.com//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

Stellen Sie außerdem sicher, dass Sie reply.proxy.gif, reply.min.js und response.proxy.js in lokale Verzeichnisse kopieren

Nach Überprüfung:

• DOKTYP
• X-UA-kompatibles Meta-Tag
• Aufnahme von html5shiv.js und reply.js (und Herunterladen der neuesten Versionen)
• reply.js ist lokal
• Hosting-Site von einem Webserver und nicht von File: //
• @Import nicht verwenden
• ...

Immer noch funktionierten col-lg, col-md und col-sm nicht. Schließlich habe ich die Verweise auf bootstrap verschoben, um vor den Verweisen auf html5shiv.js und reply.js zu stehen, und alles hat funktioniert.

Hier ist ein Ausschnitt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>

Aus der Erklärung geht hervor, dass IE8 die Standardversion für Sie ist und content="IE=edge"das Erstellen die Seite im höchsten Modus rendert. Um es kompatibel zu machen, ändern Sie es in content="IE=8".

Der IE8-Modus unterstützt viele etablierte Standards, einschließlich der W3C Cascading Style Sheets Level 2.1-Spezifikation und der W3C Selectors API. Es bietet auch begrenzte Unterstützung für die W3C Cascading Style Sheets Level 3-Spezifikation (Working Draft) und andere aufkommende Standards.

Der Edge-Modus weist Internet Explorer an, Inhalte im höchsten verfügbaren Modus anzuzeigen. Mit Internet Explorer 9 entspricht dies dem IE9-Modus. Wenn eine zukünftige Version von Internet Explorer einen höheren Kompatibilitätsmodus unterstützt, werden Seiten, die auf den Kantenmodus eingestellt sind, im höchsten von dieser Version unterstützten Modus angezeigt. Dieselben Seiten werden bei Anzeige mit Internet Explorer 9 weiterhin im IE9-Modus angezeigt.

Referenz Was macht <meta http-equiv = "X-UA-kompatibel" content = "IE = edge">?

Musste hinzufügen - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Ich habe Bootstrap 3 verwendet - hatte es auf meinem lokalen IE funktionieren.

Ich habe es live gestellt, hat im IE nicht funktioniert.

Nur Bootstrap enthält diese Codezeile nicht in ihren Vorlagen. Ich bin mir nicht sicher, warum, aber es könnte daran liegen, dass es nicht W3C-kompatibel ist.

Ich habe eine Lösung für dieses Problem. Tatsächlich unterstützen IE7 und 8 das @ media nicht richtig und wenn Sie das CSS auf "col-md- *" -Klassen überprüfen und dort die Breite in Medienbreite 992px angegeben ist. Erstellen Sie einfach eine neue CSS-Datei IE, z. B.: IE.css, und fügen Sie die bedingten Kommentare hinzu. Und dann kopieren Sie einfach die für Ihr Design erforderlichen Klassen direkt mit den dortigen Medienabfragen, und schon sind Sie fertig.

Ich hatte genau das gleiche Problem bei der Migration von Bootstrapv2 auf Version 3.

Wenn Sie (wie ich) migriert haben, indem Sie das alte spanX durch col-sm-X ersetzt haben, müssen Sie auch col-X-Klassen hinzufügen. col-X sind die Stile, die sich außerhalb von @ media-Blöcken befinden, sodass sie ohne Unterstützung für Medienabfragen funktionieren.

Um die Containerbreite festzulegen, können Sie sie selbst außerhalb eines @ media-Blocks festlegen. Etwas wie:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

Ich habe das gleiche Problem in IE 10.0. Ich weiß, dass dies nicht gerade das Problem im OP ist, aber vielleicht ist es für andere nützlich.

In meinem Fall hatte ich am Anfang des Dokuments eine leere Zeile:

[blank line]
<!DOCTYPE html>
<html lang="es">
...

Wenn sich die leere Zeile zwischen dem DOCTYPE und dem Tag befindet, wird das Problem auch angezeigt:

<!DOCTYPE html>
[blank line]
<html lang="es">

Nachdem ich die leere Zeile entfernt habe und ohne das magische X-UA-kompatible Meta, hat IE 10 begonnen, die Site korrekt zu rendern.

Wenn Sie PHP und Smarty verwenden, gehen Sie vorsichtig mit Ihren Smarty-Kommentaren um, da diese diese problematischen Leerzeilen hinzufügen :-)

Mein Head Tag ist wie folgt:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

Wenn Sie es auf lokaler Ebene versuchen möchten, versuchen Sie es über localhost oder erstellen Sie einen QS-Server, legen Sie den Inhalt fest und versuchen Sie es.

Wir benötigen reply.js für Bootstrap 3 und es funktioniert nicht auf dem lokalen Computer, wenn wir es einfach in js einfügen und im Header an HTML anhängen. Es wird angezeigt, dass der Zugriff verweigert wurde. Es funktioniert nur über den Server, da der IE Sicherheitsbeschränkungen unterliegt. : P.

Ich habe jeden Kommentar hier gelesen, alles versucht .. konnte ihn aber nicht mit Windows 7 - Internet Explorer 11 ( mit Dokumentmodus: IE8 ) zum Laufen bringen .

Dann kam mir der Gedanke, dass das Ausführen eines Dokumentmodus (IE8) nicht mit dem echten IE8 identisch ist, also habe ich Windows Virtual PC ( Windows 7 mit Internet Explorer 8 ) und tadaaaa installiert ... es funktioniert wie ein Zauber!

Ich habe diesen Code NUR am Ende der Seite eingefügt, damit er funktioniert:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

Nur als Heads-Up. Ich hatte das gleiche Problem und keines der oben genannten Probleme hat es für mich behoben. Schließlich fand ich heraus, dass reply.js kein CSS analysiert, auf das über @import verwiesen wird . Ich hatte das ganze bootstrap.min.cssvia @importin mein importiert main.css.

Stellen Sie also sicher, dass Sie kein CSS haben, das Ihre Medienabfragen enthält, auf die über @import verwiesen wird .

Ich habe die folgenden Schritte gelöst.

(1) installiertes Respond.js-Modul für Drupal 7. (2) Lessphp-Modul für Drupal 7 in Bibliotheken anstelle des Modulordners. (3) (3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->  

Verwenden von CDN-Bootstrap aus der Designeinstellung.

Weitere Informationen finden Sie in meinem Website-Blog für Drupal-Design und -Entwicklung unter www.devangsolanki.com

Wenn Sie Bootstrap 3 verwenden und alles in anderen Browsern außer IE einwandfrei funktioniert, versuchen Sie Folgendes.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Verwenden Sie diese Lösung

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

Diese Zeichenfolge <script src="js/css3-mediaqueries.js"></script>aktiviert Medienabfragen. Diese Zeichenfolge <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />aktiviert Bootstrap-Schriftarten.

Getestet auf Bootstrap 3.3.5

Link zum Herunterladen von mediaqieries.js . Link zum Herunterladen von bootstrap-ie7.css

Stellen Sie sicher, dass Sie die Bootstrap-Quelle separat verknüpfen

Wenn Sie mit dem Kompilieren der Stile zu gierig sind LESSoder SASSnicht. In meinem Projekt habe ich bootstrap.min.cssmeinen Hauptstil oben in die Datei aufgenommen - daher sollte es nur eine Anfrage für alle Stile geben.

Und aus diesem Grund funktionierten die Boostrap-Klassen nicht richtig. Funktioniert wie erwartet, wenn separat hinzugefügt.

Ich hatte das gleiche Problem, versuchte die erste Antwort, aber es fehlte etwas.

Wenn Sie Webpack verwenden, wird Ihr CSS als Style-Tag geladen, das von reply.js nicht unterstützt wird. Es wird eine Datei benötigt. Stellen Sie daher sicher, dass Bootstrap als CSS-Datei geladen ist

Persönlich habe ich verwendet extract-text-webpack-plugin

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

Hoffe es wird dir helfen