Question

所以我有这个网站使用自举网格系统，它在firefox上完全可以正常工作，但在谷歌浏览器或游戏中并不合适。

这是怎么回事？

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：

更新

使用完整的HTML编辑帖子。

Answer 1

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

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

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

1 个答案: