Sự cố IE8 với Twitter Bootstrap 3

Tôi đang tạo một trang web bằng Twitter Bootstrap mới. Trang web trông ổn và hoạt động trong tất cả các trình duyệt được yêu cầu ngoại trừ IE8.

Trong IE8, nó dường như hiển thị các yếu tố của phiên bản di động nhưng trải dài trên toàn màn hình máy tính để bàn của tôi. Tôi tin rằng vấn đề tôi gặp phải là Twitter bootstrap là thiết bị di động đầu tiên. Vì vậy, vì một số lý do, IE8 sẽ sử dụng tùy chọn này.

Tôi cũng nhận thấy rằng containerlớp dường như không kéo theo các thuộc tính CSS có độ rộng tối đa như dự định. Bất cứ ai cũng có thể thấy những gì tôi đã làm sai?

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

Bạn đã nhận được CSS của mình từ CDN (bootstrapcdn.com) respons.js chỉ hoạt động cho các tệp cục bộ. Vì vậy, hãy thử trang web của bạn trên IE8 với một bản sao cục bộ của bootstrap.css. Hoặc đọc: Thiết lập tên miền CDN / X

Lưu ý Xem thêm: https://github.com/scottjehl/Ronymous/pull/206

Cập nhật:

Vui lòng đọc: http://getbootstrap.com/getting-started/#support

Ngoài ra, Internet Explorer 8 yêu cầu sử dụng respons.js để hỗ trợ truy vấn phương tiện.

Xem thêm: https://github.com/scottjehl/R tương ứng

Vì lý do này, mẫu cơ bản chứa các dòng này trong phần đầu:

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

Tôi cũng phải đặt thẻ META sau:

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

Tôi gặp vấn đề tương tự khi chuyển từ Bootstrap 2 sang 3. Tôi đã có respons.js và html5shiv.js và đặt meta của tôi thành cạnh. Tôi đã bỏ lỡ rằng từ 2 đến 3 loại phần tử điều hướng đã thay đổi. Trong Bootstrap 2, nó là nav. Trong Bootstrap 3 bây giờ là tiêu đề. Vì vậy, để giải quyết hoàn toàn vấn đề tôi đã phải

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

Đặt cái này ngay sau khi tôi tải css của mình:

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

và sau đó thay đổi

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

đến

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

Oh và cho các biện pháp tốt, tôi cũng đã thêm

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

đơn giản vì đó là những gì trang web Bootstrap tự có.

Trong trường hợp của tôi, CSS rút gọn bootstrap đã gây ra vấn đề. Để làm cho bootstrap 3.0.2 phản hồi nhanh trong IE8 (được mô phỏng bằng Công cụ dành cho nhà phát triển F12) tôi đã phải:

1 - Đặt cờ Tương thích X-UA.

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

2 - Sử dụng bootstrap.css không được rút gọn, thay vì bootstrap.min.css

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

3 - Thêm tệp answer.js (và html5shiv.js)

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

đặt respond.jsở cuối trang nhưng trước khi đóng bodythẻ và đây là liên kết respond.jsvà chạy mã này trong localhost của bạn.

https://github.com/scottjehl/R tương ứng

Chỉ trong trường hợp. Đảm bảo bạn tải các tệp js cụ thể của IE sau khi bạn tải các tệp css của mình.

Đừng quên đặt các liên kết css của bạn vào <head>như respond.jschỉ mất các liên kết .

Như đã nêu trước đây, có hai vấn đề khác nhau: 1) IE8 không hỗ trợ truy vấn phương tiện 2) respons.js được sử dụng cùng với các tệp css tên miền chéo phải được đưa vào như mô tả trước đây.

Nếu bạn muốn sử dụng BootstrapCDN đây là một ví dụ hoạt động:

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

Đồng thời đảm bảo sao chép answer.proxy.gif, respons.min.js và respons.proxy.js trong các thư mục cục bộ

Sau khi xác minh:

• TÀI LIỆU
• Thẻ meta tương thích X-UA
• Bao gồm html5shiv.js và respons.js (và tải xuống các phiên bản mới nhất)
• respons.js là cục bộ
• Trang web lưu trữ từ một máy chủ web chứ không phải từ Tệp: //
• Không sử dụng @import
• ...

Vẫn col-lg, col-md và col-sm không hoạt động. Cuối cùng tôi đã chuyển các tham chiếu đến bootstrap trước các tham chiếu đến html5shiv.js và respons.js và tất cả đều hoạt động.

Đây là một đoạn:

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

Từ lời giải thích, IE8 là phiên bản tiêu chuẩn dành cho bạn và việc thực hiện content="IE=edge"sẽ hiển thị trang ở chế độ cao nhất. Để làm cho nó tương thích thay đổi nó thành content="IE=8".

Chế độ IE8 hỗ trợ nhiều tiêu chuẩn đã được thiết lập, bao gồm Đặc tả kỹ thuật cấp độ bảng xếp hạng 2.1 của W3C và API bộ chọn W3C; nó cũng cung cấp hỗ trợ hạn chế cho Đặc tả kỹ thuật cấp 3 của W3C Cascading Style Sheets 3 (Bản nháp làm việc) và các tiêu chuẩn mới nổi khác.

Chế độ cạnh cho Internet Explorer hiển thị nội dung ở chế độ cao nhất hiện có. Với Internet Explorer 9, điều này tương đương với chế độ IE9. Nếu bản phát hành Internet Explorer trong tương lai hỗ trợ chế độ tương thích cao hơn, các trang được đặt thành chế độ cạnh sẽ xuất hiện ở chế độ cao nhất được phiên bản đó hỗ trợ. Những trang tương tự vẫn sẽ xuất hiện trong chế độ IE9 khi được xem bằng Internet Explorer 9.

Tham khảo <meta http-Equiv = "X-UA-Tương thích" nội dung = "IE = edge"> làm gì?

Cần thêm - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Tôi đã sử dụng Bootstrap 3 - nó đã hoạt động trên IE trên máy cục bộ của tôi.

Tôi đặt nó trực tiếp không hoạt động trong IE.

Chỉ Bootstrap không bao gồm dòng mã đó trong các mẫu của họ, tôi không chắc tại sao nhưng có thể là do nó không tương thích với W3C.

Tôi có một sửa chữa cho vấn đề này. Trên thực tế IE7 và 8 không hỗ trợ @media đúng cách và nếu bạn kiểm tra css cho các lớp của col col-md- * và có chiều rộng được đưa ra theo chiều rộng phương tiện 992px. Chỉ cần tạo một tệp css mới IE, ví dụ: IE.css và thêm vào các bình luận có điều kiện. Và sau đó chỉ cần sao chép các lớp cần thiết cho thiết kế của bạn trực tiếp với bất kỳ truy vấn phương tiện nào ở đó và bạn đã hoàn thành.

Tôi đã có chính xác vấn đề tương tự khi di chuyển từ bootstrapv2 sang v3.

Nếu (như tôi) bạn đã di chuyển bằng cách thay thế spanX cũ bằng col-sm-X, bạn cũng cần thêm các lớp col-X. col-X là các kiểu nằm ngoài bất kỳ khối @media nào để chúng hoạt động mà không cần hỗ trợ truy vấn phương tiện.

Để sửa chiều rộng vùng chứa, bạn có thể tự đặt nó bên ngoài khối @media. Cái gì đó như:

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

Tôi đã gặp vấn đề tương tự trong IE 10.0. Tôi biết đây không phải là vấn đề chính xác trong OP, nhưng có lẽ nó sẽ hữu ích cho những người khác.

Trong trường hợp của tôi, tôi đã có một dòng trống ở đầu tài liệu:

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

Nếu dòng trống nằm giữa DOCTYPE và thẻ, vấn đề cũng được hiển thị:

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

Khi tôi đã xóa dòng trống và không có meta tương thích X-UA, IE 10 đã bắt đầu hiển thị trang web một cách chính xác.

Nếu bạn đang sử dụng PHP và Smarty, hãy cẩn thận với các bình luận Smarty của bạn vì họ sẽ thêm các dòng trống có vấn đề :-)

thẻ đầu của tôi là như thế này:

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

nếu bạn muốn thử tại địa phương ... hãy thử qua localhost hoặc tạo máy chủ QA và đặt nội dung và thử.

Chúng tôi cần answer.js cho bootstrap 3 và nó sẽ không hoạt động trong máy cục bộ nếu chúng tôi chỉ đưa nó vào js và nối nó vào html trong tiêu đề. Nó sẽ nói truy cập bị từ chối. nó chỉ hoạt động thông qua máy chủ vì IE có giới hạn bảo mật. : P

Tôi đã đọc mọi bình luận ở đây, đã thử mọi cách .. nhưng không thể để nó hoạt động với Windows 7 - Internet Explorer 11 ( với chế độ tài liệu: IE8 ).

Sau đó, tôi nghĩ rằng việc chạy chế độ tài liệu (IE8) không giống với IE8 thực sự, vì vậy tôi đã cài đặt Windows Virtual PC ( Windows 7 với Internet Explorer 8 ) và tadaaaa ... nó hoạt động như một bùa mê!

Tôi đã đặt đoạn mã này CHỈ ở cuối trang để làm cho nó hoạt động:

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

Chỉ là một cái đầu lên. Tôi đã có cùng một vấn đề và không ai ở trên đã sửa nó cho tôi. Cuối cùng, tôi phát hiện ra rằng answer.js không phân tích CSS được tham chiếu qua @import . Tôi đã bootstrap.min.cssnhập toàn bộ thông qua @importvào của tôi main.css.

Vì vậy, hãy đảm bảo bạn không có bất kỳ CSS nào chứa các truy vấn phương tiện được tham chiếu qua @import .

Tôi đã giải quyết các bước dưới đây.

(1) đã cài đặt mô-đun respond.js cho drupal 7. (2) mô-đun lessphp cho drupal 7 được đặt trong các thư viện, thay vì thư mục mô-đun. (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]-->  

sử dụng bootstrap cdn từ cài đặt chủ đề.

Để tìm hiểu thêm, hãy xem lại blog trang web của tôi để thiết kế và phát triển drupal www.devangsolanki.com

Nếu bạn sử dụng Bootstrap 3 và mọi thứ đều hoạt động tốt trên các trình duyệt khác trừ IE, hãy thử cách bên dưới.

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

Sử dụng giải pháp này

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

Chuỗi này <script src="js/css3-mediaqueries.js"></script>cho phép phương tiện truyền thông. Chuỗi này <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />cho phép phông chữ bootstrap.

Đã thử nghiệm trên Bootstrap 3.3.5

Liên kết để tải mediaqieries.js . Liên kết để tải xuống bootstrap-eg7.css

Hãy chắc chắn rằng bạn liên kết nguồn bootstrap riêng

Nếu bạn sử dụng LESShoặc SASSkhông tham lam với việc biên dịch các kiểu. Trong dự án của tôi, tôi đã đưa bootstrap.min.cssvào kiểu chính của mình, trên đầu tệp - vì vậy chỉ nên có một yêu cầu cho tất cả các kiểu.

Và do đó, các lớp boostrap không hoạt động đúng. Khi thêm riêng, hoạt động như mong đợi.

Tôi đã đối mặt với cùng một vấn đề, đã thử câu trả lời đầu tiên nhưng thiếu một cái gì đó.

Nếu các bạn đang sử dụng Webpack, css của bạn sẽ được tải dưới dạng thẻ kiểu không được respons.js hỗ trợ, nó cần một tệp, vì vậy hãy đảm bảo bootstrap được tải dưới dạng tệp css

Cá nhân tôi đã sử dụng 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")
            }
        ]
    }
}

Hy vọng nó sẽ giúp bạn