CSS 百分比宽度和边距问题（使用引导程序）

Question

我正在使用 twitter Bootstrap 3 实现一种“移动响应优先网页设计”，但我在边距和调整大小方面遇到了一些问题。

我的目的是实现我在上一个问题中已经描述的内容： mobile first responsive web design and responsive images questions

该网站是一个显示产品列表的电子商务网站，每个产品都是一个面板。 在 HTML 术语中：每个面板都是一个包含一个填充 . 总而言之，每一页都是一个序列。

顺便说一句，申请在线：http://rosposhop.herokuapp.com

问题： 在横向模式下的手机上，我想可视化两列，我的意思是两列并排，而不是纵向模式下的一列。

为此，我使用了 CSS 媒体查询；这里是 rosposhop.css（应用程序 CSS 定义文件）的摘录：

 /* product box (containing image) */
    .pb {
    position:relative;
    display:inline-block;
    text-align:left;
   }

    /* Smartphones (portrait) ----------- */
    @media only screen and (max-device-width : 480px) and (orientation: portrait) {
    .pb {width:100.0%;}
    }

    /* Smartphones (landscape) ----------- */
   @media only screen and (max-device-width : 480px) and (orientation: landscape) {
   .pb {width:49.718572%;}
   }

如您所见，我的天真想法是根据当前视口修改每个的宽度，因此以横向模式为例，让宽度从 100% 减小到 50%。

但无论如何我在每个 ; 之间都有一些分离像素；这就是为什么我想要一个“长”小数值：

.pb {width:49.718572%;}

这里是截图：

问题在照片中以参考编号显示：

(1) 视口左边距和 (2) 视口右边距

我的目的是满足视口空间，避免任何边距（全屏模式） 但相反，我在左侧和右侧有这些不需要的 1 像素边距。 也许问题出在百分比设置中，它不能完美地计算 div 之间存在的边距分隔（参见第 3 点）

我也尝试使用 CSS calc 指令删除像素，但没有成功：

.pb {width:calc(50% - 3px);

有什么办法可以去掉这 1 个像素的边距吗？

(3) div 之间的“水平”像素间隙和 (4) div 之间的“垂直”像素间隙

这是另一个问题。提醒我正在使用引导程序 3，如何将间隙 (3) 设置为小于 ... (3？) 像素，例如如何将间隙设置为 1 像素？

抱歉我对 CSS 的无知...我是后端人员

乔治

Answer 1

body 有一个设置的 line-height，这是导致 gap 的原因之一：line-height: 1.42857;

同时移除显示：inline-block;并使用位置：相对；向左飘浮;而是:)

然而，这确实会删除你的左边距，所以如果你想保留它，你需要将所有元素包装在一个 div 中并设置 margin: 0 auto;与位置：相对；

希望这对您有所帮助，祝您好运！