it-swarm.dev

مشكلة IE8 مع Twitter Bootstrap 3

أقوم بإنشاء موقع باستخدام Twitter Bootstrap الجديد. يبدو الموقع جيدًا ويعمل في جميع المتصفحات المطلوبة باستثناء IE8.

في IE8 ، يبدو أنه يعرض عناصر إصدار الهاتف المحمول ولكنه ممتد عبر الشاشة الكاملة لسطح المكتب. أعتقد أن المشكلة التي أواجهها هي أن Twitter bootstrap هو الجهاز المحمول أولاً. لذلك لسبب IE8 هو الذهاب لهذا الخيار.

لاحظت أيضًا أن فئة container لا يبدو أنها تسحب خصائص CSS ذات العرض الأقصى كما هو مقصود. يمكن لأي شخص أن يرى ما قمت به خطأ؟

<!-- 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>
226
wrayvon

حصلت على CSS الخاص بك من response.js CDN (bootstrapcdn.com) يعمل فقط للملفات المحلية. لذا جرب موقع الويب الخاص بك على IE8 مع نسخة محلية من bootstrap.css. أو اقرأ: إعداد CDN/X- المجال

ملاحظة راجع أيضًا: https://github.com/scottjehl/Respond/pull/206

التحديث:

يرجى قراءة: http://getbootstrap.com/getting-started/#support

بالإضافة إلى ذلك ، يتطلب Internet Explorer 8 استخدام Resp.js لتمكين دعم استعلام الوسائط.

راجع أيضًا: https://github.com/scottjehl/Respond

لهذا السبب يحتوي القالب الأساسي على هذه الخطوط في قسم الرأس:

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

اضطررت أيضًا إلى تعيين علامة META التالية:

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

واجهت نفس المشكلة عند الانتقال من Bootstrap 2 إلى 3. كنت قد حصلت بالفعل على response.js و html5shiv.js وتعيين meta على Edge. فاتني أنه من 2 إلى 3 قد تغير نوع عنصر شريط التنقل. في Bootstrap 2 كان التنقل. في Bootstrap 3 ، أصبح العنوان الآن. وذلك لحل المشكلة تماما اضطررت إلى

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

ضع هذا مباشرة بعد تحميل css:

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

ومن ثم التغيير

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

إلى

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

يا ولإجراء جيد أضفت أيضا

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

ببساطة لأن هذا ما يتمتع به موقع Bootstrap نفسه.

17
Giles Roberts

في حالتي ، كانت أداة CSS المصغرة للتمهيد تسببت في حدوث المشكلة. لجعل bootstrap 3.0.2 استجابة في IE8 (تمت مضاهاته باستخدام أدوات مطور F12) اضطررت إلى:

1 - اضبط علامة X-UA المتوافقة.

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

2 - استخدم bootstrap.css غير المصغّر ، بدلاً من bootstrap.min.css

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

3 - أضف answer.js (و html5shiv.js)

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

ضع respond.js في أسفل الصفحة ولكن قبل إغلاق علامة body وهنا رابط respond.js وقم بتشغيل هذا الرمز في مضيفك المحلي.

https://github.com/scottjehl/Respond

6
jignesh kheni

فقط في حالة. تأكد من تحميل ملفات IE js المحددة بعد تحميل ملفات css.

6
TenJack

لا تنسَ أن تضع روابطك في css في <head> لأن respond.js لا يأخذ سوى تلك الروابط.

5
Angel Yordanov

كما ذكرنا سابقًا ، هناك مشكلتان مختلفتان: 1) IE8 لا يدعم استعلامات الوسائط 2) يجب تضمين response.js المستخدمة مع ملفات css عبر المجال كما هو موضح سابقًا.

إذا كنت ترغب في استخدام BootstrapCDN ، فإليك مثال عملي:

<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]-->

تأكد أيضًا من نسخ respons.proxy.gif و response.min.js و response.proxy.js في الدلائل المحلية

5
Matteo Rossi

بعد التحقق:

  • DOCTYPE
  • علامة التعريف المتوافقة مع X-UA
  • تضمين html5shiv.js و response.js (وتنزيل أحدث الإصدارات)
  • respons.js يجري المحلية
  • استضافة موقع من خادم الويب وليس من ملف: //
  • لا تستخدمimport
  • ...

لا يزال col-lg و col-md و col-sm لا يعملان. أخيرًا ، قمت بنقل المراجع إلى bootstrap لأكون قبل المراجع إلى html5shiv.js و response.js وقد عملت جميعها.

هنا مقتطف:

<!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

من الشرح ، يشير إلى أن IE8 هو الإصدار القياسي بالنسبة لك وجعل content="IE=Edge" سيعرض الصفحة في أعلى وضع. لجعله متوافقًا ، قم بتغييره إلى content="IE=8".

يدعم وضع IE8 العديد من المعايير المحددة ، بما في ذلك مواصفات W3C Cascading Style Sheets Level 2.1 و API W3C Selectors ؛ كما يوفر دعمًا محدودًا لمواصفات W3C Cascading Style Sheets Level 3 (مسودة العمل) وغيرها من المعايير الناشئة.

يطلب وضع الحافة من Internet Explorer عرض المحتوى في أعلى وضع متاح. مع Internet Explorer 9 ، هذا يكافئ وضع IE9. إذا كان إصدار مستقبلي من Internet Explorer يدعم وضع توافق أعلى ، فستظهر الصفحات المعينة إلى وضع الحافة في أعلى وضع مدعوم من هذا الإصدار. ستظل هذه الصفحات نفسها تظهر في وضع IE9 عند عرضها باستخدام Internet Explorer 9.

مرجع ماذا تفعل <meta http-equiv = "X-UA-Compatible" content = "IE = Edge">؟

2
Dextere

مطلوب لإضافة - <meta http-equiv="X-UA-Compatible" content="IE=Edge">

كنت أستخدم Bootstrap 3 - لقد عملت على IE على بلدي المحلي.

أضعها على الهواء مباشرة ولم تنجح في IE.

لا يتضمن Just Bootstrap هذا السطر من التعليمات البرمجية في قوالبه ، لست متأكدًا من السبب ولكن قد يكون بسبب عدم توافق W3C.

2
Adam Kolinski

لدي إصلاح لهذه المشكلة. في الواقع IE7 و 8 لا يدعمانmedia بشكل صحيح وإذا قمت بفحص css لفئات "col-md- *" وهناك عرض في عرض الوسائط 992px. فقط قم بإنشاء ملف css جديد IE على سبيل المثال: IE.css وأضف التعليقات الشرطية. ثم قم فقط بنسخ الفئات المطلوبة للتصميم الخاص بك مباشرةً مع أي استعلامات وسائط هناك وانتهى الأمر.

1
Denise

أعاني نفس المشكلة في IE 10.0. أعلم أن هذه ليست المشكلة بالضبط في البروتوكول الاختياري ، ولكن ربما ستكون مفيدة للآخرين.

في حالتي ، كان لدي سطر فارغ في بداية المستند:

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

إذا كان الخط الفارغ بين DOCTYPE والعلامة ، تظهر المشكلة أيضًا:

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

بمجرد إزالة الخط الفارغ ، وبدون علامة X-UA المتوافقة مع السحر ، بدأ IE 10 في عرض الموقع بشكل صحيح.

إذا كنت تستخدم PHP و Smarty ، فاحذر من تعليقاتك Smarty لأنها ستضيف تلك الأسطر الفارغة المشكّلة :-)

0
Googol

علامة رأسي مثل هذا:

<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>

إذا كنت تريد المحاولة باللغة المحلية ... جرب عبر المضيف المحلي ، أو قم بإنشاء خادم ضمان الجودة وتعيين المحتوى وحاول.

نحتاج إلى Resp.js for bootstrap 3 ولن يعمل في الجهاز المحلي إذا وضعناه في js وألحق به html في الرأس. سيقول الوصول مرفوض. يعمل فقط من خلال الخادم لأن IE لديه قيود أمنية. : P

0
sandeepnpn

إذا كنت تستخدم Bootstrap 3 وكل شيء يعمل بشكل جيد على المتصفحات الأخرى باستثناء IE ، فجرب ما يلي.

<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

لقد قرأت كل تعليق هنا ، جربت كل شيء .. لكن لم أستطع تشغيله مع Windows 7 - Internet Explorer 11 (مع وضع المستند: IE8).

بعد ذلك ، يتبادر إلى الذهن أن تشغيل وضع المستند (IE8) ليس هو نفسه IE8 الحقيقي ، لذلك قمت بتثبيت Windows Virtual PC (Windows 7 مع Internet Explorer 8) و tadaaaa ... يعمل مثل السحر!

لقد وضعت هذه الشفرة فقط في أسفل الصفحة لجعلها تعمل:

<!-- 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

كمجرد بداية. واجهت نفس المشكلة ولم يتم إصلاح أي من الأمور المذكورة أعلاه بالنسبة لي. في النهاية اكتشفت أن response.js لا يتم تحليل CSS المشار إليه عبرimport . لقد تم استيراد الكل bootstrap.min.css عبر @import إلى main.css الخاص بي.

لذا تأكد من عدم وجود أي CSS يحتوي على استعلامات الوسائط الخاصة بك المشار إليها عبرimport .

0
Alex Sutu

واجهت نفس المشكلة ، جربت الإجابة الأولى ولكن كان هناك شيء مفقود.

إذا كنت تستخدم حزمة Webpack ، فسيتم تحميل ملف css كعلامة نمط غير مدعومة من قبل response.js ، فهي تحتاج إلى ملف ، لذا تأكد من تحميل bootstrap كملف css

شخصيا اعتدت 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")
            }
        ]
    }
}

أتمنى أنها تساعدك

0
Sami Triki

استخدم هذا الحل

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

تقوم هذه السلسلة <script src="js/css3-mediaqueries.js"></script> بتمكين استعلامات الوسائط. تقوم هذه السلسلة <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> بتمكين خطوط التمهيد.

تم اختباره على Bootstrap 3.3.5

رابط لتحميل mediaqieries.js . رابط للتنزيل bootstrap-ie7.css

0
AC1D

لقد حلت أدناه الخطوات.

(1) تم تثبيت الوحدة النمطية Respond.js لـ drupal 7. (2) وحدة lessphp لـ drupal 7 في المكتبات ، بدلاً من مجلد الوحدة النمطية. (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]-->  

باستخدام cdn bootstrap من إعداد الموضوع.

لمعرفة المزيد ، راجع موقع الويب الخاص بي لتصميم وتطوير دروبال www.devangsolanki.com

0
user3471193

كان لدي نفس المشكلة بالضبط عند الترحيل من bootstrapv2 إلى v3.

إذا قمت (مثلي) بالترحيل عن طريق استبدال spanX القديم بـ col-sm-X ، فأنت بحاجة أيضًا إلى إضافة دروس col-X. col-X هي الأنماط الموجودة خارج أي كتلmedia بحيث تعمل بدون دعم استعلام الوسائط.

لإصلاح عرض الحاوية ، يمكنك ضبطه بنفسك خارج كتلةmedia. شيء مثل:

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

تأكد من ربط مصدر bootstrap بشكل منفصل

إذا كنت تستخدم LESS أو SASS فلن تكون جشعًا في تجميع الأنماط. في مشروعي ، قمت بتضمين bootstrap.min.css في أسلوبي الرئيسي ، في الجزء العلوي من الملف - لذلك يجب أن يكون هناك طلب واحد فقط لجميع الأنماط.

وبسبب ذلك ، فصول التعزيز لا تعمل بشكل صحيح. عند إضافته بشكل منفصل ، يعمل كما هو متوقع.

0
Atais