引导网格在谷歌浏览器中无法正常工作答案

【问题标题】：Bootstrap grid not working properly in google chrome引导网格在谷歌浏览器中无法正常工作
【发布时间】：2018-09-12 01:52:49
【问题描述】：

所以我有一个使用引导网格系统的网站，它在 Firefox 上 100% 完美运行，但在 google chrome 或 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>

火狐：

谷歌浏览器和野生动物园：

更新

使用完整的 HTML 编辑帖子。

【问题讨论】：

这个页面有自定义 CSS 吗？
不，仅此而已。
嗯，除了您提供的标记和 Bootstrap 的 CSS 之外，该页面上还有其他内容。这就是 this jsFiddle 中包含的所有内容，对我来说，Chrome 上的一切似乎都运行良好。
我现在也将 HTML 代码的标题部分包含在原始帖子中。如你看到的;没有使用自定义代码。您的 jsFiddle 确实有效，但此代码在现实生活中不起作用（或者只是幻想？）。
but this code does not work in real life 能否提供活动页面或网站的链接。

标签： html css twitter-bootstrap google-chrome

【解决方案1】：

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

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

【讨论】：