Html 简单的引导xs断点布局在移动和PC上看起来非常不同（帮助）_Html_Css_Twitter Bootstrap_Mobile_Responsive

Html 简单的引导xs断点布局在移动和PC上看起来非常不同（帮助）

html css twitter-bootstrap mobile

Html 简单的引导xs断点布局在移动和PC上看起来非常不同（帮助）,html,css,twitter-bootstrap,mobile,responsive,Html,Css,Twitter Bootstrap,Mobile,Responsive,如果这个主题已经被讨论过，我将继续道歉（尽管我还没有在Stack Exchange上找到它）。我正在努力学习网格系统，听了很多讲座。为了练习，我尝试在容器行col结构中显示三个图像。问题是，我的简单引导网格设置在我的计算机上正确地显示在我认为是xs断点的位置，但在移动设备上没有。后者的填充看起来既过多（边沟几乎和一张图片一样大），又不对称。我已经包括了下面两个屏幕截图我已经试着注释掉css文件（我只是用它在列的顶部和底部添加填充），以防它干扰引导的自然样式。那没用。如果您能帮助您减少PC浏览和

如果这个主题已经被讨论过，我将继续道歉（尽管我还没有在Stack Exchange上找到它）。我正在努力学习网格系统，听了很多讲座。为了练习，我尝试在容器行col结构中显示三个图像。问题是，我的简单引导网格设置在我的计算机上正确地显示在我认为是xs断点的位置，但在移动设备上没有。后者的填充看起来既过多（边沟几乎和一张图片一样大），又不对称。我已经包括了下面两个屏幕截图

我已经试着注释掉css文件（我只是用它在列的顶部和底部添加填充），以防它干扰引导的自然样式。那没用。如果您能帮助您减少PC浏览和移动网站的不协调，我们将不胜感激！（图片下方的代码）

xs断点的PC视图：

xs断点的移动视图：

在手机上使用“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列，这在试图调整自身的同时，会弄乱填充。在上面的代码中，我删除了

行

并添加了

sm

在手机上使用“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列，这在试图调整自身的同时，会弄乱填充。在上面的代码中，我删除了

行

并添加了

sm

如果其他人对此感到困惑，我会说解决方案是在html头部包含以下标记：

如果其他人对此感到困惑，我会说，解决方案是在html头中包含以下标记：

我不认为用“sm”替换“xs”会有什么不同，因为默认情况下，bootstrap会假设列值与其他每一个截断的xs值相同，除非另有说明。因此，对于这种情况，通过将xs设置为6，我们也将sm设置为6。然而，出于极大的谨慎，我尝试了实现您的解决方案（据我所知）。不幸的是，我仍然得到同样的结果。。。还有其他想法吗？我一定是犯了一个非常明显的错误……记住，一行中有12列，如果你想要三个图像，那么每个图像使用4列。在

xs

中，您使用了6列。如果您想要3个图像，请将6替换为4.Right。所以对于xs视图，我希望每行有两个图像。那很好。但我希望手机上的填充物与电脑上的填充物一样。我正在绞尽脑汁想为什么我的手机屏幕会1）增大填充物的大小，2）在图像的右侧填充物比左侧填充物多。更大的显示屏显示了所有断点的预期结果，这真是令人困惑……不幸的是，这在移动设备上似乎也不起作用（但在PC上的所有尺寸上仍然可以正常工作……），尽管我太缺乏经验，无法排除问题可能是使用大于12列的总和，我不相信。我的理解是，最佳实践规定，列应始终包含在行中，如果在为响应性设计创建包装效果的上下文中，超过12行是可以的。这里有一个链接指向我在研究这篇文章时刚刚读到的一篇文章：我不认为用“sm”替换“xs”会有什么不同，因为在默认情况下，bootstrap会假设列值与其他截断的xs值相同，除非另有说明。因此，对于这种情况，通过将xs设置为6，我们也将sm设置为6。然而，出于极大的谨慎，我尝试了实现您的解决方案（据我所知）。不幸的是，我仍然得到同样的结果。。。还有其他想法吗？我一定是犯了一个非常明显的错误……记住，一行中有12列，如果你想要三个图像，那么每个图像使用4列。在

xs

<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>