首页 文章

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

提问于
浏览 次
425

如何使用twitter bootstrap框架为 class="row" 元素添加保证金？

css twitter-bootstrap

17 回答

  • 754

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

    #myCustomDivID .row {
     margin-top:20px;
 }
    回复于
  • 27
    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>
    回复于
  • 44

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

    .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>
    回复于
  • -3

    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可能是bootstrap的变量）

    回复于
  • 1

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

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

    单位是从 1 到 5 ：在variables.scss中，这意味着如果你设置mt-1，它会给出.25rem的margin .

    $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

    回复于
  • 9

    在.css文件中添加到此类：

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

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

    .rowSpecificFormName td {
    margin-top: 50px;
}
    回复于
  • 33

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

    <p>&nbsp;</p>
    回复于
  • 1

    您可以将以下类用于bootstrap 4：

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

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

    回复于
  • 82

    Bootstrap 3

    如果需要在bootstrap中分隔行，可以使用 .form-group . 这会在行的底部增加15px的余量 .

    在您的情况下，要获得保证金最高，您可以将此类添加到以前的 .row 元素

    <div class="row form-group">

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

    Bootstrap 4

    你可以使用内置的spacing classes

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

    类名中的“t”使其仅适用于“顶部”侧，底部，左侧，右侧都有类似的类 . 该数字定义了空间大小 .

    回复于
  • 0

    在Bootstrap 4 alpha中你可以使用它

    class margin-bottom-5

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

    回复于
  • 1

    你可以添加这段代码：

    [class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
    回复于
  • 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

    回复于
  • 2

    对于 Bootstrap 4 ，应使用间距

    速记实用课程

    采用以下格式：

    -

    property 的其中一个是：

    • m - 用于设置保证金的类

    • p - 用于设置填充的类

    sides 的其中一个是：

    • 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的类

    • blank - 用于在元素的所有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上的实例 .

    回复于
  • 1

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

    .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以使其符合您的要求 .

    回复于
  • 164

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

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

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

    如果您使用Bootstrap导入LESS Bootstrap文件，请尝试使用比例Bootstrap Theme空间定义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);}
    回复于
  • 0

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

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

    .top-buffer { margin-top:20px; }

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

    <div class="row top-buffer"> ...
    回复于
  • 36

    只需使用这个 bs3-upgrade 助手来进行间距和文本对齐......

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

    回复于

相关问题