webentwicklung-frage-antwort-db.com.de

IE8 Problem mit Twitter Bootstrap 3

Ich erstelle eine Seite mit dem neuen Twitter Bootstrap. Die Site sieht gut aus und funktioniert in allen erforderlichen Browsern mit Ausnahme von IE8.

In IE8 werden scheinbar Elemente der Mobilversion angezeigt, die sich jedoch über den gesamten Bildschirm meines Desktops erstrecken. Ich glaube, das Problem, das ich habe, ist, dass Twitter bootstrap ist zuerst mobil. Also aus irgendeinem Grund wird IE8 für diese Option gehen.

Ich stelle auch fest, dass die Klasse container die CSS-Eigenschaften mit maximaler Breite nicht wie beabsichtigt zu verwenden scheint. 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>
227
wrayvon

Sie haben Ihr CSS von CDN (bootstrapcdn.com) erhalten. Reply.js funktioniert nur für lokale Dateien. Probieren Sie Ihre Website im 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

Update:

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 für Medienabfragen zu aktivieren.

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

Aus diesem Grund enthält die Grundvorlage im Kopfbereich folgende Zeilen:

<!-- 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]-->
260
Bass Jobsen

Ich musste auch das folgende META-Tag setzen:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
62
Damian

Ich hatte das gleiche Problem beim Übergang von Bootstrap 2 zu 3. Ich habe bereits reply.js und html5shiv.js erhalten und mein Meta auf Edge gesetzt. Das habe ich von 2 auf 3 verpasst Der Typ des navbar-Elements hatte sich geändert. 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">

Schreiben Sie das gleich nach dem Laden meiner CSS:

<!--[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 die Bootstrap site selbst genau das hat.

17
Giles Roberts

In meinem Fall verursachte das minimierte bootstrap CSS) das Problem. bootstrap 3.0.2 in IE8 (emuliert mit den F12 Developer Tools), die ich hatte, reaktiv machen zu:

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

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

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

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

3 - Füge die 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]-->
14
pedrusky

stellen respond.js am Ende der Seite, aber vor dem Schließen von body und hier ist der Link von respond.js und führe diesen Code in deinem localhost aus.

https://github.com/scottjehl/Respond

6
jignesh kheni

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

6
TenJack

Vergessen Sie nicht, Ihre CSS-Links in das <head> wie respond.js nimmt nur die.

5
Angel Yordanov

Wie bereits erwähnt, gibt es zwei verschiedene Probleme: 1) IE8 unterstützt keine Medienabfragen. 2) respons.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="//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 die Dateien "reply.proxy.gif", "reply.min.js" und "response.proxy.js" in lokale Verzeichnisse kopieren

5
Matteo Rossi

Nach der Überprüfung:

  • DOCTYPE
  • 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 vor die Verweise auf html5shiv.js und reply.js verschoben 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>
4
James Climer

Aus der Erklärung geht hervor, dass IE8 die Standardversion für Sie ist und content="IE=Edge" rendert die Seite im höchsten Modus. Um es kompatibel zu machen, ändere 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 eingeschränkte Unterstützung für die W3C Cascading Style Sheets Level 3-Spezifikation (Working Draft) und andere neu entstehende Standards.

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

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

2
Dextere

Ich habe ein Update 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, wird die Breite in Medienbreite 992px angegeben. Erstellen Sie einfach eine neue CSS-Datei IE zB: IE.css und fügen Sie die bedingten Kommentare hinzu. Kopieren Sie dann einfach die für Ihr Design erforderlichen Klassen direkt mit den dortigen Medienabfragen, und Sie sind fertig.

1
Denise

Muss hinzugefügt werden - <meta http-equiv="X-UA-Compatible" content="IE=Edge">

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

Ich habe gesagt, es hat in 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.

1
Getsomepeaches

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

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

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

Befindet sich die leere Zeile zwischen dem DOCTYPE und dem Tag, wird das Problem ebenfalls angezeigt:

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

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

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

0
Googol

mein head tag sieht so aus:

<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 lokal versuchen möchten, versuchen Sie es über localhost, oder erstellen Sie einen QS-Server, und legen Sie den Inhalt fest, und versuchen Sie es.

Wir brauchen reply.js für bootstrap 3 und es funktioniert nicht auf lokalen Rechnern, wenn wir es einfach in js einfügen und es im Header an HTML anhängen as IE hat Sicherheitsbeschränkungen.: P

0
sandeepnpn

Wenn Sie Bootstrap 3 verwenden und in anderen Browsern außer IE alles 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]-->
0
vutbao

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

Dann fiel mir ein, dass das Ausführen eines Dokumentmodus (IE8) nicht mit dem tatsächlichen IE8 identisch ist. Deshalb habe ich Windows Virtual PC (Windows 7 mit Internet Explorer 8 installiert ) und tadaaaa ... 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>
0
Sneeuw

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 CSS, auf das über @ import verwiesen wird, nicht analysiert. Ich hatte das ganze bootstrap.min.css importiert über @import in mein main.css.

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

0
Alex Sutu

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

Wenn Sie mit Webpack arbeiten, wird Ihre CSS als Style-Tag geladen, das von reply.js nicht unterstützt wird. Sie benötigen eine Datei. Stellen Sie daher sicher, dass bootstrap als CSS-Datei geladen ist

Persönlich habe ich 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

0
Sami Triki

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> Medienabfragen aktivieren. Diese Zeichenfolge <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> enable bootstrap fonts.

Getestet am Bootstrap 3.3.5

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

0
AC1D

Ich habe unten 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]-->  

mit cdn bootstrap von Theme-Einstellung.

Weitere Informationen finden Sie in meinem Website-Blog unter drupal design and development www.devangsolanki.com

0
user3471193

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

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 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 diese außerhalb eines @media-Blocks festlegen. So etwas wie:

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

Stellen Sie sicher, dass Sie die Quelle bootstrap separat verknüpfen

Wenn Sie LESS oder SASS verwenden, müssen Sie die Stile nicht erst kompilieren. In mein Projekt habe ich bootstrap.min.css in meinem Hauptstil, oben in der Datei - es sollte also 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.

0
Atais