Bootstrap网格在Google Chrome中无法正常工作

Question

因此，我有一个使用引导网格系统的网站，该网站在firefox上可以100％完美地工作，但在谷歌浏览器或safari上却不能正常工作。

怎么了

HTML

 <!DOCTYPE html>
<html lang="en">
    <head>
      <title>Index</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/bootstrap.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
    </head>
<body>
            <div class="container-fluid">
                <div class="container-fluid">
                    <ul class="nav nav-tabs nav-justified" role="tablist">
                    <li role="presentation" class="active"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
                    <li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
                    <li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
                    <li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
                    <li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
                    <li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
                  </ul>
                </div>
                <div class="container">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade in active" id="index">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-4 col-lg-4">
                                        <img src="images/placeholder.jpg" class="img-responsive">
                                        <div class="well">
                                        Lorem ipsum
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-lg-4">
                                        <img src="images/placeholder.jpg" class="img-responsive">
                                        <div class="well">
                                        Lorem ipsum
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-lg-4">
                                        <img src="images/placeholder.jpg" class="img-responsive">
                                        <div class="well">
                                        Lorem ipsum
                                        </div>
                                    </div>                                  
                                </div>                      
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="INDEX">...</div>
                    </div>
                </div>
            </div>
    </body>
</html>

火狐：

Google Chrome和Safari：

UPDATE

使用完整的HTML编辑了帖子。

Answer 1

根据Bootstrap 3文档，合理的导航存在一个错误：“在水平方向上调整浏览器的大小会导致合理的导航中的呈现错误，这些错误会在刷新后清除”。 也许这会在元素之间产生冲突，请进行一些更改以查看您的问题是否朝这个方向发展。

请随时向我们更新和/或确认您是否已找到解决方案。 最好的祝福！

Bootstrap网格在Google Chrome中无法正常工作

问题描述

1 个解决方案

解决方案1
0 2018-09-11 17:52:49

Bootstrap网格在Google Chrome中无法正常工作

问题描述

1 个解决方案

解决方案1 0 2018-09-11 17:52:49

解决方案1
0 2018-09-11 17:52:49