Question

<!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上实现以下显示。它完美适用于野生动物园。

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，但这似乎没有帮助或伤害。

所以我认为真正的问题是bootstrap不会在chrome上呈现给我。在safari上它显示为link。在Chrome上，它显示为link。谢谢你的帮助！

Answer 1

是的，因为你没有添加最多12列

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

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

如果没有为较小的屏幕宽度指定，你可能甚至不需要col-sm-12 bootstrap会自动使每列的全宽

链接到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上的Bootstrap无法正常工作

1 个答案: