引导：移动显示上列之间的间隙 [英] Bootstrap: Gap between columns on mobile display

问题描述

我使用bootstrap 3.0做一个网站，我想让HTML和CSS在桌面，平板电脑和手机上看得很清楚。

I am doing a website using bootstrap 3.0 which I want the HTML and CSS to be seen neatly on a desktop, tablet and mobile.

我遇到的问题是，当您在移动显示器上查看网站时，列是堆叠的（我不批评，因为这会停止滚动可能）。但是，我想在列之间有一点间隙（甚至1-2px）。

A problem that I am having is that when you view the site on a mobile display the column are stacked (in which I am not criticizing as this stops scrolling as much as possible). However, I would like a little gap between the columns (even 1-2px).

到目前为止的代码

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-8">
        <div class="Columns">
        ..content 
        </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-4">
        <div class="Columns">
        ..content
        </div>
    </div>
</div>

显示此操作并显示堆栈列的图像

An image to show what this is doing and to display the stack columns

>

如何在列之间实现一点空白？

How could I achieve a little gap between the columns?

感谢

推荐答案

添加自定义类 .column-margin 以设置行/列之间的边距。

Add a custom class .column-margin to set the margin between the rows/columns.

@media (max-width: 991px) {
  .column-margin {
    margin: 2px 0;
  }
}

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-8">
    <div class="Columns column-margin">
      <img src="http://placehold.it/300x300" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-4">
    <div class="Columns">
      <img src="http://placehold.it/300x300" />
    </div>
  </div>
</div>

Codeply

这篇关于引导：移动显示上列之间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！