Bootstrap间距为4个中心

时间:2016-02-07 23:16:26

标签: twitter-bootstrap

我有我想要的网站设计,它涉及我连续4个盒子。

我希望这4个框居中,但页面的左右两侧也有空格。

所以我认为我会聪明并且使用6列离开最左边和右边空。

这在完整的浏览器上看起来很棒但是在移动设备上显然它看起来很糟糕,因为它有不需要的空间。任何人都可以通过另一种方式提供和建议吗?

http://legaleye.16mb.com/members/index.php

这仍然是一项正在进行中的工作但链接显示了我在手机和桌面浏览中打开时的含义。

谢谢你们

1 个答案:

答案 0 :(得分:0)

道歉我不在桌面附近,否则我会为你嘲笑一些事情,但我认为我至少指出了你正确的方向。

我创建了2个CSS类,1个用于左栏,padding-left,然后是右栏padding-right,然后我将它放在@media查询中在移动设备(最小480px)上为那些类设置填充为0,因为我假设您希望列在移动设备上垂直(如标准引导程序)?我认为这是最简单的解决方案,它可以消除管理6列的复杂性。

修改 你应该需要的CSS:

.left{
  margin-left:2%;
}

.right{
  margin-left:2%;
}

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

然后只需将类添加到列class="left"