如何使物品响应？

Question

我是前端工作的新手，并使网站响应，所以我想知道如何确保无论屏幕大小，项目之间的空间总是20px。

例如，当屏幕未调整大小时，它看起来很好：

然而，当我把它调整到一点时，每个项目之间的空间就消失了。

然后当它进一步向下调整大小时，它会变成每行2个项目，这就是我想要的，但我只希望项目之间有20px，而不像它们在下面显示的那样：

我正在使用bootstrap 3并显示以下项目：

 <div class="col-md-3 col-sm-6" id="animateslide">

   <div class="article" id="testarticediv" >

     Items being displayed here....
   </div>
</div>

我将以下内容添加到我自己的main.css文件中：

@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Answer 1

可以通过使用css calc属性将宽度设置为div / box来实现， 这是设置每个div宽度的逻辑，它将在所有屏幕尺寸中产生20px空间：

width：calc（（全宽 - 总计算空间b / w网格）/总数：网格）;

/* Four Column Layout */
@media(min-width:1200px){
   width: calc( ( 100% - ( 20px * 3 ) ) / 4 ); 
}


/* Three Column Layout */
@media(min-width:800px){
   width: calc( ( 100% - ( 20px * 2 ) ) / 3 ); 
}

/* Two Column Layout */
@media(min-width:650px){
   width: calc( ( 100% - ( 20px * 1 ) ) / 2 ); 
}

Answer 2

只需添加到每个框中：

    margin: 0px 10px;

这会将顶部和底部边距设置为0（将其更改为您想要的任何值）并将左右边距设置为10px。那么每个项目之间应该有20px的利润率。

Answer 3

您是否尝试在相关边框处使用10px填充每个项目？填充10px的两个项目彼此相邻将等于20px。