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

Question

我正在使用Twitter Bootstrap 3实现一种“移动响应式首次网页设计”，我在边距和调整大小方面存在一些问题。

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

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

BTW，申请在线：http://rosposhop.herokuapp.com

问题： 在横向模式的手机上，我想要想象两列，我的意思是两个并排，而不是纵向模式。

为此，我使用了CSS Media查询;这里摘录了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）视口右边距

我的意图是实现vieport空间，避免任何边距（某种全屏模式） 但是我在左边和右边有这些不需要的1像素边距。 也许问题在于百分比设置，不能完全计算div之间的边际分离的存在（见第3点）

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

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

有任何想法要删除这些1像素的边距吗？

（3）div之间的“orizo​​ntal”像素间隙和（4）div之间的“垂直”像素间隙

那是另一个问题。提醒我正在使用bootstrap 3，如何将间隙（3）设置为小于...（3？）像素，例如如何将该间隙设置为1像素？

提前抱歉我对CSS的无知......我是一个后端人而不是

乔治

Answer 1

正文的设定线高度是间隙原因之一：line-height：1.42857;

同时删除display：inline-block;并使用position：relative;向左飘浮;相反:)）

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

希望这有点帮助，祝你好运！