简单 Bootstrap xs 断点布局在移动设备和 PC 上看起来非常不同（帮助）

Question

如果这个主题已经涉及到，我会继续道歉（尽管我还没有能够在 Stack Exchange 上找到它）。我正在尝试学习网格系统并听过一些讲座。作为练习，我尝试在 container-row-col 结构中显示三个图像。问题是我的简单 bootstrap 网格设置在我认为是 xs 断点的计算机上正确显示，但在移动设备上却没有。后者的填充似乎既过多（装订线几乎与其中一个图像一样大）并且两侧不对称。我在下面包含了两者的屏幕截图。

我已经尝试注释掉 css 文件（我只是用它来向 col 的顶部和底部添加填充），以防以某种方式干扰 bootstrap 的自然样式.那什么也没做。任何帮助使 PC 视图和移动站点看起来不那么不协调的帮助将不胜感激！（代码在图片下方）

xs断点的PC视图：

xs-breakpoint的移动端视图：

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
    <title></title>
</head>
<body>
    <div class = "container">
        <div class="row">
            <div class="col-xs-6 col-md-4 top-buffer">
                <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded">
             </div>      
            <div class="col-xs-6 col-md-4 top-buffer">
                <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded">
             </div>  
            <div class="col-xs-6 col-md-4 top-buffer">
                <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded">
             </div>  
        </div>
    </div>
</body>

（下面是 main.css 文件）

   .top-buffer {
margin-top: 20px;}

Answer 1

使用 'sm' 移动设备。 'xs' 可能无法呈现，因为屏幕尺寸大于 xs 的参数。看看使用 'sm' 是否适用于手机屏幕！

编辑 1：试试这个代码：

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
    <title></title>
</head>
<body>
    <div class = "container">
            <div class="col-xs-6 col-sm-6 col-md-4 top-buffer">
                <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded">
             </div>      
            <div class="col-xs-6 col-sm-6 col-md-4 top-buffer">
                <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded">
             </div>  
            <div class="col-xs-6 col-sm-6 col-md-4 top-buffer">
                <img src="https://vignette2.wikia.nocookie.net/spartacus/images/5/55/Juliuscaesar.jpg/revision/latest?cb=20130606052819" class="img-responsive img-rounded">
             </div>  
    </div>
</body>

我认为您指定了一行，然后在 xs 中总共使用了 18 列，这在试图适应自己的同时，弄乱了填充。在上面的代码中，我删除了 row 并添加了 sm。

Answer 2

如果其他人对此感到困惑，我会说解决方案是在您的 html 头部包含以下标签：<meta name="viewport" content="width=device-width, initial-scale=1">

简单 Bootstrap xs 断点布局在移动设备和 PC 上看起来非常不同（帮助）

Simple Bootstrap xs break-point layout looks very different on mobile and PC (HELP)

html

css

mobile

twitter-bootstrap

responsive