Question

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

我已经尝试评论出css文件（我只是用它来添加填充到col的顶部和底部），以防万一在某种程度上干扰了bootstraps自然样式。那什么都没做。任何有关使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上看起来非常不同（帮助）

2 个答案: