Twitter Bootstrap - 在行之间添加顶部空间

Posted 2023-02-16

技术标签:

【中文标题】Twitter Bootstrap - 在行之间添加顶部空间【英文标题】：Twitter Bootstrap - add top space between rows 【发布时间】：2012-04-22 13:33:15 【问题描述】：

如何使用 twitter 引导框架为 class="row" 元素添加边距？

【问题讨论】：

【参考方案1】：

在 .css 文件中添加这个类：

.row 
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;

或创建一个新类并将其添加到元素中

.rowSpecificFormName td 
    margin-top: 50px;

【讨论】：

uhmmmmm 我不喜欢触摸 css，如果我需要在其他页面中没有边距的行怎么办？你可以新建一个类 .rowSpecificForm 但在 Twitter Bootstrap 中没有为只有 'margin-top' 定义的 css 类。奇怪他们没有设置几个垂直间距的类，我需要添加它们没有其他解决方案：/，谢谢尼尔森记住 CSS 级联，因此您永远不必编辑 bootstrap.css。【参考方案2】：

在 Twitter 引导程序中编辑或覆盖行是一个坏主意，因为这是页面脚手架的核心部分，您将需要没有上边距的行。

要解决此问题，请改为创建一个新类“top-buffer”，以添加您需要的标准边距。

.top-buffer  margin-top:20px;

然后在需要上边距的行 div 上使用它。

<div class="row top-buffer"> ...

【讨论】：

编辑原生行对于框架来说是错误的，新类应该只是对行类的补充......这是一个微妙的区别，但在 Twitter Bootstrap 中，行具有特定的页面布局角色。无论如何，我只是想提供帮助，我的解决方案是解决问题的有效解决方案。没办法，恕我直言，这些答案略有不同。这个更有用，因为它包含“命名您的类样式，以便您的 html 更容易阅读”，并且您可以在 html 中读取 margin-top 而不是 rowSpecificForName。这个答案更符合 twitter 引导模式。他们将在 Bootstrap 4 中添加特定的垂直间距类：github.com/twbs/bootstrap/issues/4286 我从这些 cmets 中学到的只是开发人员非常固执己见，有些人更喜欢 2 + 3 = 5，而另一些人更喜欢 3 + 2 = 5。继续…… @Fabios。应该学习的是，对于像 Bootstrap 这样的框架，编辑本机代码或覆盖它是一个坏主意。这些场景是无穷无尽的，但这里有几个例子。 a.) 覆盖 - 如果你覆盖 .row 类，你现在需要遍历你的项目并向不应接收边距的行添加一个额外的类 b.) 编辑本机代码 - 你在工作中继承了一个项目并且你想要升级到 bootstrap4；哎呀！一切看起来都不对！？现在，您有责任浏览 bootstrap 3 文件，试图找出前任开发人员到底改变了什么。【参考方案3】：

好吧，只是为了让你知道发生了什么，我修复了使用 Acyra 上面所说的一些新类：

.top5  margin-top:5px; 
.top7  margin-top:7px; 
.top10  margin-top:10px; 
.top15  margin-top:15px; 
.top17  margin-top:17px; 
.top30  margin-top:30px;

只要我愿意<div class="row top7"></div>

为了更好的响应，您可以添加 margin-top:7% 而不是 5px 例如：D

【讨论】：

我觉得这个方案比公认的方案优雅多了。 @alexander 但更通用。 .top-buffer margin-top:20px; 与 .top30 margin-top:30px; 有何不同？好吧，从任何开发人员的角度来看：都是一样的。适合用例的调整不计入此处。特别是，如果 OP 回答了他自己的问题。显然最通用的解决方案是从 javascript 操作 DOM 以动态更改类或样式... 经典的 17px 上边距；非常有用。【参考方案4】：

我将这些类添加到我的引导样式表中

.voffset   margin-top: 2px; 
.voffset1  margin-top: 5px; 
.voffset2  margin-top: 10px; 
.voffset3  margin-top: 15px; 
.voffset4  margin-top: 30px; 
.voffset5  margin-top: 40px; 
.voffset6  margin-top: 60px; 
.voffset7  margin-top: 80px; 
.voffset8  margin-top: 100px; 
.voffset9  margin-top: 150px;

例子

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

【讨论】：

【参考方案5】：

有时 margin-top 会导致设计问题：

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

所以，我建议创建“margin-bottom classes”而不是“margin-top classes”并将它们应用于上一项。

如果您使用 Bootstrap 导入 LESS Bootstrap 文件，请尝试使用成比例的 Bootstrap 主题空间定义 margin-bottom 类：

.margin-bottom-xs margin-bottom: ceil(@line-height-computed / 4);  
.margin-bottom-sm margin-bottom: ceil(@line-height-computed / 2); 
.margin-bottom-md margin-bottom: @line-height-computed;
.margin-bottom-lg margin-bottom: ceil(@line-height-computed * 2);

【讨论】：

【参考方案6】：

我正在使用这些类来改变上边距：

.margin-top-05  margin-top: 0.5em; 
.margin-top-10  margin-top: 1.0em; 
.margin-top-15  margin-top: 1.5em; 
.margin-top-20  margin-top: 2.0em; 
.margin-top-25  margin-top: 2.5em; 
.margin-top-30  margin-top: 3.0em;

当我需要一个元素与上面的元素有 2em 间距时，我会这样使用它：

<div class="row margin-top-20">Something here</div>

如果您更喜欢像素，请将 em 更改为 px 以按照自己的方式使用。

【讨论】：

好主意，但我将数字抽象出来，因为它们太具体了。如果您坚持使用 s、m、l、xl、xxl 等抽象，您可以通过 css 更改大小，而无需更改模板中的名称。 @MikePurcell 好主意，它可能是适合您的解决方案。但我更喜欢更准确的方式来定义边距。使用 em 而不是 px 为我提供了一种松散的方式来实现它而不会太具体。 <div class="row margin-top-20"> 比 <div class"row" style="margin-top: 2.0em"> 有什么好处？ @icc97 基本上，关注点分开，但在这里你可以看到其他意见：***.com/a/2612494/1683224。 @WileyMarques 对于名为例如“top-buffer”（如在接受的答案中），但对于名为 margin-top-20 的类没有意义。除非你很高兴 margin-top-20 实际上添加了 2ems 的填充以外的东西，这只会令人困惑。【参考方案7】：

如果你只想改变一页，添加以下样式规则：

 #myCustomDivID .row 
     margin-top:20px;

【讨论】：

【参考方案8】：

对于 Bootstrap 4，应使用

应用间距

速记实用程序类

格式如下：

propertysides-size

属性是以下之一：

m - 用于设置边距的类 p - 用于设置填充的类

边是以下之一：

t - 用于设置 margin-top 或 padding-top 的类 b - 用于设置 margin-bottom 或 padding-bottom 的类 l - 用于设置 margin-left 或 padding-left 的类 r - 用于设置 margin-right 或 padding-right 的类 x - 用于设置 *-left 和 *-right 的类 y - 用于同时设置 *-top 和 *-bottom 的类空白 - 用于在元素的所有 4 个边上设置边距或内边距的类

size 是以下之一：

0 - 用于通过将其设置为 0 来消除边距或填充的类 1 - （默认情况下）用于将边距或填充设置为 $spacer * .25 的类 2 - （默认情况下）用于将边距或填充设置为 $spacer * .5 的类 3 - （默认情况下）用于将边距或填充设置为 $spacer 的类 4 - （默认情况下）用于将边距或填充设置为 $spacer * 1.5 的类 5 - （默认情况下）用于将边距或填充设置为 $spacer * 3 的类 auto - 用于将边距设置为 auto 的类

所以你应该做这些：

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

阅读docs 了解更多说明。通过here 尝试实时示例。

【讨论】：

随着 Bootstrap 4 的发布，这应该是现在公认的答案。它带有这些内置类，无需创建新的。【参考方案9】：

我的把戏。不太干净，但对我来说效果很好

<p>&nbsp;</p>

【讨论】：

【参考方案10】：

引导程序 3

如果您需要在引导程序中分隔行，您可以简单地使用.form-group。这会在行的底部增加 15px 的边距。

在您的情况下，要获得顶部边距，您可以将此类添加到之前的 .row 元素

<div class="row form-group">

/* From bootstrap.css */
.form-group 
        margin-bottom: 15px;

引导程序 4

你可以使用内置的spacing classes

<div class="row mt-3"></div>

类名中的“t”使其仅适用于“top”侧，bottom、left、right 也有类似的类。数字定义空间大小。

【讨论】：

是否从 BS4 中剥离了表单组？不，form-group is still present，但是添加了特殊的边距/填充类，可以完成这项工作并且有更多选项。在 Bootstrap V 4 中是否对此进行了多项更改？我现在使用的是 4 版本，mt-3 不起作用，所以使用了form-group It should work，检查您链接到项目的引导 css 是否包含“.mt-3”类定义。【参考方案11】：

Bootstrap 4 alpha，用于 margin-top：速记 CSS 类名称 mt-1、mt-2（mt-lg-5、mt-sm-2）底部，右侧，左侧相同，并且您还有 auto 类 ml-auto

    <div class="mt-lg-1" ...>

单位从 1 到 5 ：在 variables.scss 这意味着如果您设置 mt-1 它会给出 0.25rem 的边距顶部。

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

在这里阅读更多

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

【讨论】：

【参考方案12】：

在 Bootstrap 4 alpha+ 你可以使用这个

class margin-bottom-5

类使用以下格式命名：property-sides-size

【讨论】：

【参考方案13】：

您可以将以下类用于引导程序 4：

mt-0 mt-1 mt-2 mt-3 mt-4 ...

参考：https://v4-alpha.getbootstrap.com/utilities/spacing/

【讨论】：

【参考方案14】：

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   
     margin-top: 25px;  
   
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

【讨论】：

请在您的答案中添加解释。没有解释的回答是没有用的。【参考方案15】：

Bootstrap3

CSS（仅限装订线，周围没有边距）：

.row.row-gutter 
  margin-bottom: -15px;
  overflow: hidden;

.row.row-gutter > *[class^="col"] 
  margin-bottom: 15px;

CSS（等边距，15px/2）：

.row.row-margins 
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */

.row.row-margins > *[class^="col"] 
  margin-top: 8px;
  margin-bottom: 8px;

用法：

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

（使用 SASS 或 LESS 15px 可能是引导程序中的变量）

【讨论】：

【参考方案16】：

您可以添加此代码：

[class*="col-"] 
    padding-top: 1rem;
    padding-bottom: 1rem;

【讨论】：

【参考方案17】：

只需简单地使用这个 bs3-upgrade 帮助器来进行间距和文本对齐...

https://github.com/studija/bs3-upgrade

【讨论】：

【参考方案18】：

如果你使用的是 BootStrap 3.3.7，你可以通过 NPM 使用开源库 bootstrap-spacer

npm install bootstrap-spacer

或者你可以访问github页面：

https://github.com/chigozieorunta/bootstrap-spacer

这是一个如何使用 .row-spacer 类分隔行的示例：

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

如果您需要列之间的空格，您还可以添加 .row-col-spacer 类：

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

您还可以将各种 .row-spacer 和 .row-col-spacer 类组合在一起：

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

【讨论】：

我建议不要为 40 行 css 添加依赖项【参考方案19】：

<div class="row row-padding">

简单的代码

【讨论】：

使用 bootstrap - 4 你可以添加这个类来使行之间的间距【参考方案20】：

有一个技巧可以自动为容器中的第 2+ 行添加边距。

.container-row-margin .row + .row 
    margin-top: 1rem;

将.container-row-margin 添加到容器中，结果：

完整的 HTML：

<div class="bg-secondary text-white">
    div outside of the container.
</div>
<div class="container container-row-margin">
    <div class="row">
        <div class="col col-4 bg-warning">
            Row without top margin
        </div>
    </div>
    <div class="row">
        <div class="col col-4 bg-primary text-white">
            Row with top margin
        </div>
    </div>
    <div class="row">
        <div class="col col-4 bg-primary text-white">
            Row with top margin
        </div>
    </div>
</div>
<div class="bg-secondary text-white">
    div outside of the container.
</div>

取自官方samples。

【讨论】：

以上是关于Twitter Bootstrap - 在行之间添加顶部空间的主要内容，如果未能解决你的问题，请参考以下文章

用于 Rails 的 Twitter Bootstrap Gems 之间的比较 [关闭]

Twitter bootstrap 和 Angular.js 之间真正的（或隐藏的）区别

Twitter Bootstrap 内联表单间距

Twitter 的 Bootstrap 3 网格，更改断点和删除填充

twitter bootstrap 有屏和无屏的区别

在 Rails 布局中使用 Sass 的 Twitter Bootstrap