Question

我正在使用bootstrap 3因为我被告知它与Explorer 8兼容。我之前使用的是基础。

但是我试图让引导网格在资源管理器上工作但没有成功。

当我在Firefox上使用网格时，它很简单。你使用一个带有类行的div和子类你将类放入col-md - *。

适用于Firefox，但在Explorer 8上它只是将div嵌套在彼此之上。

我设法让它适用于Firefox和Explorer 8 usign col-xs- *。但是当我改变窗口的大小来模拟它在移动设备上的显示方式时，它只是拉伸div而不是将它们叠加在一起，正如预期的那样。

现在我有一个dillema。 Col-xs在资源管理器上运行，但它没有响应。 Cols-md适用于除Explorer 8之外的所有设备。

这是我的测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <meta charset="utf8" />
        <!--[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.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <title>Bootstrap test</title>
    </head>
    <body>
        <div class="main container-fluid">
            <header class="jumbotron text-center">
                <h1>Bootstrap test</h1>
            </header>
            <section class="row">
                <div class="col-md-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
                </div>
                <div class="col-md-3">
                    <h3>Menu</h3>
                    <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                        <li><a href="#">Item 5</a></li>
                        <li><a href="#">Item 6</a></li>
                        <li><a href="#">Item 7</a></li>
                        <li><a href="#">Item 8</a></li>
                        <li><a href="#">Item 9</a></li>
                        <li><a href="#">Item 10</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </body>
</html>

以上代码适用于Firefox，但不适用于Explorer 8。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <meta charset="utf8" />
        <!--[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.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <title>Bootstrap test</title>
    </head>
    <body>
        <div class="main container-fluid">
            <header class="jumbotron text-center">
                <h1>Bootstrap test</h1>
            </header>
            <section class="row">
                <div class="cols-xs-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
                </div>
                <div class="cols-xs-3">
                    <h3>Menu</h3>
                    <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                        <li><a href="#">Item 5</a></li>
                        <li><a href="#">Item 6</a></li>
                        <li><a href="#">Item 7</a></li>
                        <li><a href="#">Item 8</a></li>
                        <li><a href="#">Item 9</a></li>
                        <li><a href="#">Item 10</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </body>
</html>

此代码适用于资源管理器但无响应。

enter image description here

Answer 1

我在这篇文章的评论中找到了答案：

http://www.joostrap.com/blog/bootstrap-3-supporting-internet-explorer-8-and-9

对于我们来说，这是通过确保在css之后加载Respond js来解决的。

我还将col-xs更改为col-sm，现在即使在1024x768分辨率下它也能在Firefox和Explorer 8上运行奇迹。

Answer 2

我没有看到您的文档头部有一个视口元标记：

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

有关详细信息，请参阅http://getbootstrap.com/css/#overview-mobile。

Bootstrap Grid IE 8兼容性

2 个答案: