Chrome上的引导程序不起作用答案

【问题标题】：Bootstrap on Chrome Not workingChrome上的引导程序不起作用
【发布时间】：2015-05-11 05:59:05
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
    <body>

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-sm-2 col-lg-4 col-sm-push-4" style="background-color: blue">
            Content C
        </div>
        <div class="col-12 col-sm-2 col-lg-4 col-sm-push-4" style="background-color: pink">
            Content D
        </div>
        <div class="col-12 col-sm-2 col-lg-2 col-sm-pull-8" style="background-color: purple" >
            Content A
        </div>
        <div class="col-12 col-sm-2 col-lg-2 col-sm-pull-8" style="background-color: purple">
            Content B
        </div>
    </div>
</div>

</body>

所以我试图在 chrome 上实现以下显示。它在 safari 上完美运行。

Desktop:
[ 1st col ][ 2nd col ][ 3rd col ][ 4th col ]

Mobile:
    [ 3rd col ]
    [ 4th col ]
    [ 1st col ]
    [ 2nd col ]

是我的语法错误还是我应该包括一些额外的步骤。我尝试将 col-xs-4 col-sm-4 col-md-4 添加到每一行，但这似乎没有帮助或伤害。

所以我认为真正的问题是引导程序没有在 chrome 上为我呈现。在 safari 上显示为 link。在 chrome 上，它显示为 link。感谢您的帮助！

【问题讨论】：

标签： html twitter-bootstrap google-chrome

【解决方案1】：

是的，因为您没有将列添加到 12

如果你想让它看起来像你的图表，你可以放这个类

<div class="col col-lg-3 col-sm-12"></div>

会做你正在寻找的东西，你甚至可能不需要 col-sm-12 如果没有为较小的屏幕宽度指定，引导程序往往会自动使每列全宽

链接到 jsfiddle，例如 http://jsfiddle.net/tw1gqocq/1/

更新 :::: 这是为了得到正确的排序。并且 bootstrap cdn 应该以 https://

开头

<div class="container-fluid">
    <div class="row">

        <div class="col col-lg-3 col-sm-12 col-lg-push-6" style="background-color: purple" >
            Content 3rd
        </div>
        <div class="col col-lg-3 col-sm-12 col-lg-push-6" style="background-color: green">
            Content 4th
        </div>
        <div class="col col-lg-3 col-sm-12 col-lg-pull-6" style="background-color: blue">
            Content 1st
        </div>
        <div class="col col-lg-3 col-sm-12 col-lg-pull-6" style="background-color: pink">
            Content 2nd
        </div>   
    </div>
</div>

【讨论】：

哦，对不起，我有那些行，我只是没有正确复制我的代码。我已经编辑了我的问题。除非你的意思是别的。在 chrome 上，它只显示为每个类的一行，而不是将其分成列。
我添加了一个 jsfiddle 的链接，您可以查看它并调整屏幕大小以查看它的工作原理jsfiddle.net/tw1gqocq
真正的问题是如何让移动视图以不同的顺序显示？
好吧，看来 bootstrap 只是没有在 chrome 中为我呈现。这是您刚刚发布的代码。 s3.amazonaws.com/thisismyamazingawesomewebsite.com/… 这在 chrome 中对你有用吗？
对不起，我想我的问题是为什么它在 chrome 上显示为 link。在 safari 上显示为 link