Twitter bootstrap 引导至中心4个框的间距

我有我的网站的设计，它包括我在一排4个盒子

我希望这4个框居中，但也有一个空间的左侧和右侧的页面

所以我认为我会很聪明，使用6列，让最左边和最右边都是空的

这在完整的浏览器上看起来很棒，但在移动设备上显然很糟糕，因为它有不需要的空间。有人能提供解决这个问题的其他方法和建议吗

这仍然是一个正在进行的工作，但链接显示了我的意思，如果你打开一个移动与桌面浏览

---

谢谢大家

很抱歉我没有靠近桌面，否则我会为你们嘲笑一些东西，但我想我至少会给你们指出正确的方向

我会创建两个CSS类，一个用于左栏，左栏使用

padding left

，然后右栏使用

padding right

，然后我会将其放入@media查询中，以将移动设备上的类的padding设置为0（最小480px），因为我假设您希望移动设备上的列垂直（如标准引导）？我认为这是最简单的解决方案，而且它消除了管理6列的复杂性

编辑： 您应该需要的css：

.left{
  margin-left:2%;
}

.right{
  margin-left:2%;
}

@media screen and (min-width: 480px) {
    .left{
        margin:0;
    }
    .right{
        margin:0;
    }
}

---

然后只需将类添加到您的列

class=“left”

嗨，谢谢。我是新手，所以不确定@media查询是什么，但我会尝试阅读一下。再次谢谢你，不客气。哦，对不起，我也应该把这个链接到上面，W3Schools永远是这个的起点。如果你陷入困境，请再给我留言，我相信我能为你指明正确的方向。作为一个快速概述，媒体查询是bootstrap如何根据设备和屏幕大小进行CSS更改，因此基本上它们是任何移动友好CSS工作良好的基础。如果您的问题仍然存在，我已经提供了我在回答中提到的CSS。希望这有帮助。嗨，再次感谢，我已经按照建议做了，但是它只是使左a右框比中间2宽，而不是在框的侧面添加填充物。我没有做错什么吗？我试着把代码的一部分放进去，这样你就可以检查我是否做对了，但是我不能让它作为一个代码块而不仅仅是一个文本字符串来工作