列的引导间距[重复]

Posted 2023-03-06

【中文标题】列的引导间距[重复]

【英文标题】：Bootstrap spacing for columns [duplicate]

【发布时间】：2018-09-29 17:14:26

【问题描述】：

我正在尝试在我的引导列之间创建间距，但它似乎并没有自动完成。我需要将特定的方式或类添加到列中吗？

<div class="row row_padding">
 <div class="col-sm-4 text-center">
  <div class="col-sm-11">1</div>
 </div>
 <div class="col-sm-4 text-center">
  <div class="col-sm-11">2</div>
 </div>
 <div class="col-sm-4 text-center">
  <div class="col-sm-11">3</div>
 </div>
</div>

【问题讨论】：

您可以为单个 col-sm-4 添加填充/边距

***.com/questions/18738712/… 或 ***.com/questions/30179644/… 的可能重复

你有没有考虑过学习CSS Grid而不是使用类似表格的标记？

【参考方案1】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center bdr">
    <div class="col-xs-4 m-1 p-1 w-25 border border-secondary">#1</div>
    <div class="col-xs-4 w-25 m-1 p-1 border border-secondary">#2</div>
    <div class="col-xs-4 m-1 p-1 w-25 border border-secondary">#3</div>
  </div>
</div>

【讨论】：

当应用列系统不再起作用时，我无法拥有三个“col-sm-4”而不将其放到新行上。

@AG_BOSS 你认为你已经成功应用了 CSS 吗？也让我们知道这个属性是什么top-margin: 25px;。我想知道这个答案是如何得到一票赞成的。

OP 希望每个之间有空间。只需为您的 div 应用边框并检查一下。

请看一下这个截图 - imgur.com/a/fHDN15Q。我已经添加了代码，但我需要每个白色列之间的间距，这似乎仍然没有应用。

它和你上面提供的完全一样，只是包含在一行中。

【参考方案2】：

我认为col-md-offset 或类似的课程对你有用。 :-)

【讨论】：

我试过这个，但它对我不起作用。类是：col-md-offset-4

@Jordan col-md-offset 应该与您的列大小相匹配，假设您使用 col-xs-2 作为您的 div 列，那么您可以使用 col-xs-offset-4 或其他东西共 12 个。

@salmanwebdevelper 它应该是 col-md-offset-[1-12] 并且它在 xs、sm、md 和 lg 之间变化。 ;)