Bootstrap：移动显示上的列之间的差距

Posted 2023-03-31

【中文标题】Bootstrap：移动显示上的列之间的差距

【英文标题】：Bootstrap: Gap between columns on mobile display

【发布时间】：2015-05-24 13:12:50

【问题描述】：

我正在使用 bootstrap 3.0 做一个网站，我希望 html 和 CSS 在桌面、平板电脑和移动设备上都能整齐地看到。

我遇到的一个问题是，当您在移动显示器上查看该网站时，该列是堆叠的（我没有批评，因为这会尽可能地停止滚动）。但是，我希望列之间有一点间隙（甚至是 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>

一张图片来显示它正在做什么并显示堆栈列

我怎样才能在列之间实现一点间隙？

谢谢

【参考方案1】：

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

@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

【参考方案2】：

为col-xs-12 留出边距，以便所有块在移动设备中都有底部边距。

@media (max-width: 767px) 
  .col-xs-12 
    margin-bottom: 10px;
  

【参考方案3】：

为了获得均匀的间距和列大小，我会执行以下操作：（注意：根据需要将 col-md-* 更改为 col-sm-* 或 col-xs-*）

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>