用ChatGPT解决这个技术问题 Extra ChatGPT

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

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

A
Acyra

在 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
我从这些评论中了解到，开发人员非常固执己见，有些人更喜欢 2 + 3 = 5，而另一些人更喜欢 3 + 2 = 5。继续……
@法比奥。应该学习的是，对于像 Bootstrap 这样的框架，编辑本机代码或覆盖它是一个坏主意。这些场景是无穷无尽的，但这里有几个例子。 a.) 覆盖 - 如果您覆盖 .row 类，您现在需要遍历您的项目并向不应接收边距的行添加一个附加类 b.) 编辑本机代码 - 您在工作中继承了一个项目并且您想要升级到 bootstrap4；哎呀！一切看起来都不对！？现在，您有责任浏览 bootstrap 3 文件，试图找出前任开发人员究竟改变了什么。
i
itsme

好的，只是为了让您知道当时发生了什么，我修复了使用 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 上边距；很有用。
r
robsch

引导程序 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”使其仅适用于“顶部”侧，底部、左侧、右侧有类似的类。数字定义空间大小。

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

对于 Bootstrap 4 间距，应使用

速记实用程序类

采用以下格式：

{属性}{边}-{大小}

财产是以下之一：

m - 对于设置边距的类

- 用于设置填充的类

其中边是以下之一：

t - 用于设置 margin-top 或 padding-top 的类

- 对于设置 margin-bottom 或 padding-bottom 的类

- 对于设置 margin-left 或 padding-left 的类

- 用于设置 margin-right 或 padding-right 的类

- 对于同时设置 *-left 和 *-right 的类

- 对于同时设置 *-top 和 *-bottom 的类

空白 - 用于在元素的所有 4 个边上设置边距或填充的类

其中 size 是以下之一：

0 - 对于通过将其设置为 0 来消除边距或填充的类

- （默认情况下）用于将边距或填充设置为 $spacer * .25 的类

- （默认情况下）用于将边距或填充设置为 $spacer * .5 的类

- （默认情况下）用于将边距或填充设置为 $spacer 的类

- （默认情况下）用于将边距或填充设置为 $spacer * 1.5 的类

- （默认情况下）用于将边距或填充设置为 $spacer * 3 的类

auto - 对于将边距设置为 auto 的类

所以你应该做这些： 

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

阅读 docs 了解更多说明。试用 here 上的实时示例。

随着 Bootstrap 4 的发布，这应该是现在公认的答案。它带有这些内置类，无需创建新类。
k
kurroman

有时 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);}
I
Igor Ivancha

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

.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>
H
Hexodus

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

.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 基本上，与关注点分开，但在这里您可以看到其他意见：stackoverflow.com/a/2612494/1683224。
@WileyMarques 对于名为“top-buffer”的类（如已接受的答案）是这样，但对于名为 margin-top-20 的类没有意义。除非您对 margin-top-20 实际添加除 2ems 填充之外的其他内容感到高兴，否则这只会令人困惑。
S
Smilefounder

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

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

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

M
Matt K

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

    <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

T
Tepken Vannkorn

在 .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。
f
fredyfx

如果您只想在一页上进行更改，请添加以下样式规则： 

 #myCustomDivID .row {
     margin-top:20px;
 }
A
Al Quarashi

在 Bootstrap 4 alpha+ 中，您可以使用它 

class margin-bottom-5

这些类使用以下格式命名：{property}-{sides}-{size}

s
shiva krishna 
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>
请为您的答案添加解释。没有解释的回答是没有用的。
I
Isometriq

引导程序3

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 可能是引导程序中的变量）

H
Harshvardhan Singh Baghel 
<div class="row row-padding">

简单的代码

使用 bootstrap - 4 您可以添加此类以使行之间的间距
A
Alamakanambra

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

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

将 .container-row-margin 添加到容器中会导致：

https://i.stack.imgur.com/Yfq1C.png

完整的 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。

T
Tarak_bz

您可以添加此代码： 

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
T
TheAivis

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

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

C
Chigozie Orunta

如果您使用的是 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 添加依赖项
a
asiniy

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

<p>&nbsp;</p>

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

友情链接

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.