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

作者: 你抱着孩子@先跑
发布时间: 2025-01-14 10:53:31 (8天前)
转自：

16 条回复

0#
回复此人
一别而尽几念深i | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我正在使用这些类来改变上边距： </p> <pre> <code> .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; } </code> </pre> <P> 当我需要一个元素与上面的元素有2em间距我使用它像这样： </p> <pre> <code> <div class="row margin-top-20">Something here</div> </code> </pre> <P> 如果您喜欢像素，那么将em更改为px以使其符合您的要求。 </p> </DIV>

编辑
1#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以将以下类用于bootstrap 4： </p> <P> <code> mt-0 </code> <code> mt-1 </code> <code> mt-2 </code> <code> mt-3 </code> <code> mt-4 </code> ... </p> <P> 参考： <a href="https://v4-alpha.getbootstrap.com/utilities/spacing/" rel="noreferrer"> https://v4-alpha.getbootstrap.com/utilities/spacing/ </A> </p> </DIV>

编辑
2#
回复此人
溪林 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我的把戏。不太干净，但对我来说效果很好 </p> <pre> <code> <p> </p> </code> </pre> </DIV>

编辑
3#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我将这些类添加到我的bootstrap样式表中 </p> <pre> <code> .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; } </code> </pre> <P> 例 </p> <pre> <code> <div class="container"> <div class="row voffset2"> <div class="col-lg-12"> <p> Vertically offset text. </p> </div> </div> </div> </code> </pre> </DIV>

编辑
4#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于的<strong> Bootstrap 4 </强> 应使用间距 </p> <BLOCKQUOTE> <P> 速记实用类 </p> </BLOCKQUOTE> <P> 采用以下格式： </p> <BLOCKQUOTE> <P> {属性} {}双方 - {}大小 </p> </BLOCKQUOTE> <P> 哪里的<strong> <EM> 属性 </EM> </强> 是其中之一： </p> <UL> <LI> m - 用于设置保证金的类 </LI> <LI> p - 用于设置填充的类 </LI> </UL> <P> 哪里的<strong> <EM> 双方 </EM> </强> 是其中之一： </p> <UL> <LI> t - 用于设置margin-top或padding-top的类 </LI> <LI> b - 用于设置margin-bottom或padding-bottom的类 </LI> <LI> l - 用于设置margin-left或padding-left的类 </LI> <LI> r - 用于设置margin-right或padding-right的类 </LI> <LI> x - 用于同时设置* -left和* -right的类 </LI> <LI> y - 用于同时设置* -top和* -bottom的类 </LI> <LI> 空白 - 用于在元素的所有4个边上设置边距或填充的类 </LI> </UL> <P> 哪里的<strong> <EM> 尺寸 </EM> </强> 是其中之一： </p> <UL> <LI> 0 - 对于通过将其设置为0来消除边距或填充的类 </LI> <LI> 1 - （默认情况下）用于将边距或填充设置为$ spacer * .25的类 </LI> <LI> 2 - （默认情况下）用于将边距或填充设置为$ spacer * .5的类 </LI> <LI> 3 - （默认情况下）用于将边距或填充设置为$ spacer的类 </LI> <LI> 4 - （默认情况下）用于将边距或填充设置为$ spacer * 1.5的类 </LI> <LI> 5 - （默认情况下）用于将边距或填充设置为$ spacer * 3的类 </LI> <LI> auto - 用于将边距设置为auto的类 </LI> </UL> <P> 所以你应该做以下任何一件事： </p> <pre> <code> <div class="row mt-1"> <div class="row mt-2"> ... <div class="row mt-5"> </code> </pre> <P> 阅读 <a href="https://getbootstrap.com/docs/4.0/utilities/spacing/" rel="noreferrer"> 文档 </A> 更多解释。试试实例 <a href="https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_util_spacing&stacked=h" rel="noreferrer"> 这里 </A> 。 </p> </DIV>

编辑
5#
回复此人
757461156 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在.css文件中添加到此类： </p> <pre> <code> .row { margin-left: -20px; *zoom: 1; margin-top: 50px; } </code> </pre> <P> 或者创建一个新类并将其添加到元素中 </p> <pre> <code> .rowSpecificFormName td { margin-top: 50px; } </code> </pre> </DIV>

编辑
6#
回复此人
木木 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您只想在一个页面上进行更改，请添加以下样式规则： </p> <pre> <code> #myCustomDivID .row { margin-top:20px; } </code> </pre> </DIV>

编辑
7#
回复此人
北极星微控 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在Bootstrap 4 alpha +中你可以使用它 </p> <pre> <code> class margin-bottom-5 </code> </pre> <P> 这些类使用以下格式命名： <code> {property}-{sides}-{size} </code> </p> </DIV>

编辑
8#
回复此人
与之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 好的，只是为了让你知道发生了什么，我修复了一些新的类，正如Acyra上面所说： </p> <pre> <code> .top5 { margin-top:5px; } .top7 { margin-top:7px; } .top10 { margin-top:10px; } .top15 { margin-top:15px; } .top17 { margin-top:17px; } .top30 { margin-top:30px; } </code> </pre> <P> 每当我想要的时候 <code> <div class="row top7"></div> </code> </p> <P> 为了更好的响应，你可以添加 <code> margin-top:7% </code> 代替 <code> 5px </code> 例如：D </p> </DIV>

编辑
9#
回复此人
取之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Bootstrap 4 alpha，用于margin-top：速记CSS类名mt-1，mt-2（mt-lg-5，mt-sm-2）同样适用于底部，右侧，左侧，您还有自动类ml-auto </p> <pre> <code> <div class="mt-lg-1" ...> </code> </pre> <P> 单位来自 <code> 1 </code> 至 <code> 5 </code> ：在variables.scss中这意味着如果你设置mt-1，它会给出.25rem的优势。 </p> <pre> <code> $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; </code> </pre> <P> 在这里阅读更多 </p> <P> <a href="https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering" rel="nofollow noreferrer"> https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering </A> </p> </DIV>

编辑
10#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只是简单地使用它的<strong> <code> bs3-upgrade </code> </强> 间距和文本对齐的助手...... </p> <P> <a href="https://github.com/studija/bs3-upgrade" rel="nofollow noreferrer"> https://github.com/studija/bs3-upgrade </A> </p> </DIV>

编辑
11#
回复此人
昵称不能为空 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您使用的是BootStrap 3.3.7，则可以通过NPM使用开源库bootstrap-spacer </p> <pre> <code> npm install bootstrap-spacer </code> </pre> <P> 或者您可以访问github页面： </p> <pre> <code> https://github.com/chigozieorunta/bootstrap-spacer </code> </pre> <P> 下面是一个使用.row-spacer类来处理空间行的示例： </p> <pre> <code> <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> </code> </pre> <P> 如果列之间需要空格，还可以添加.row-col-spacer类： </p> <pre> <code> <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> </code> </pre> <P> 你也可以组合各种.row-spacer＆amp; .row-col-spacer类在一起： </p> <pre> <code> <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> </code> </pre> </DIV>

编辑
12#
回复此人
昵称为空呵呵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以添加这段代码： </p> <pre> <code> [class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; } </code> </pre> </DIV>

编辑
13#
回复此人
VIP | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 编辑或覆盖Twitter引导程序中的行是一个坏主意，因为这是页脚手架的核心部分，您将需要没有上边距的行。 </p> <P> 要解决此问题，请创建一个新类“top-buffer”，以添加所需的标准边距。 </p> <pre> <code> .top-buffer { margin-top:20px; } </code> </pre> <P> 然后在需要上边距的行div上使用它。 </p> <pre> <code> <div class="row top-buffer"> ... </code> </pre> </DIV>

编辑
14#
回复此人
polo | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Bootstrap3 </p> <P> CSS（仅限排水沟，没有边距）： </p> <pre> <code> .row.row-gutter { margin-bottom: -15px; overflow: hidden; } .row.row-gutter > *[class^="col"] { margin-bottom: 15px; } </code> </pre> <P> CSS（相等的边距，15px / 2）： </p> <pre> <code> .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; } </code> </pre> <P> 用法： </p> <pre> <code> <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> </code> </pre> <P> （SASS或LESS 15px可能是bootstrap的变量） </p> </DIV>

编辑

登录后才能参与评论