css - TwitterBootstrap-行の間に上部のスペースを追加します

Question

class="row"Twitterブートストラップフレームワークを使用して要素にマージントップを追加するにはどうすればよいですか？

Answer 1

Twitterブートストラップで行を編集またはオーバーライドすることはお勧めできません。これは、ページスキャフォールディングのコア部分であり、上余白のない行が必要になるためです。

これを解決するには、代わりに、必要な標準マージンを追加する新しいクラス「トップバッファ」を作成します。

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

そして、トップマージンが必要な行divでそれを使用します。

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

Answer 2

さて、あなたにその時何が起こったのかを知らせるために、私は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>

応答性を高めるために、たとえば：Dmargin-top:7%の代わりに追加できます5px

Answer 3

ブートストラップ3

ブートストラップで行を区切る必要がある場合は、単に。を使用できます.form-group。これにより、行の下部に15pxのマージンが追加されます。

あなたの場合、マージントップを取得するには、このクラスを前の.row要素に追加できます

<div class="row form-group">

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

ブートストラップ4

組み込みのスペーシングクラスを使用できます

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

クラス名の「t」は「上」側にのみ適用されるようにします。下、左、右にも同様のクラスがあります。数値はスペースサイズを定義します。

Answer 4

Bootstrap 4の場合、間隔は次を使用して適用する必要があります

短縮ユーティリティクラス

次の形式で：

{property} {sides}-{size}

プロパティが次のいずれかである場合：

• m-マージンを設定するクラスの場合
• p-パディングを設定するクラスの場合

側面は次のいずれかです。

• t-margin-topまたはpadding-topを設定するクラスの場合
• b-margin-bottomまたはpadding-bottomを設定するクラスの場合
• l-margin-leftまたはpadding-leftを設定するクラスの場合
• r-margin-rightまたはpadding-rightを設定するクラスの場合
• x-*-左と*-右の両方を設定するクラスの場合
• y-*-topと*-bottomの両方を設定するクラスの場合
• 空白-要素の4辺すべてにマージンまたはパディングを設定するクラスの場合

サイズは次のいずれかです。

• 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">

詳細については、ドキュメントをお読みください。ここでライブの例を試してください。

Answer 5

マージントップが設計上の問題を引き起こす場合があります。

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

したがって、「マージントップクラス」ではなく「マージンボトムクラス」を作成して、前のアイテムに適用することをお勧めします。

LESSブートストラップファイルをインポートするブートストラップを使用している場合は、比例したブートストラップテーマスペースを使用してマージンボトムクラスを定義してみてください。

.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);}  

Answer 6

これらのクラスをブートストラップスタイルシートに追加しました

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

Answer 7

私はこれらのクラスを使用してトップマージンを変更しています：

.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に変更して自分の好みに合わせてください。

Answer 8

ブートストラップ4には次のクラスを使用できます。

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

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

Answer 9

Bootstrap 4 alpha、margin-topの場合：CSSクラス名の省略形mt-1、mt-2（mt-lg-5、mt-sm-2）は下、右、左で同じで、自動クラスml-もあります。自動

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

単位は、variables.scssのfrom1から5：です。これは、mt-1を設定すると、.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/#horizo​​ntal-centering

Answer 10

.cssファイルでこのクラスに追加します。

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

または、新しいクラスを作成して要素に追加します

.rowSpecificFormName td {
    margin-top: 50px;
}

Answer 11

1ページだけを変更する場合は、次のスタイルルールを追加します。

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

Answer 12

Bootstrap 4 alpha +では、これを使用できます

class margin-bottom-5

クラスには、次の形式を使用して名前が付けられます。{property}-{sides}-{size}

Answer 13

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>

Answer 14

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を使用すると、ブートストラップからの変数になる可能性があります）

Answer 15

<div class="row row-padding">

簡単なコード

Answer 16

コンテナの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>

公式サンプルから取得。

Answer 17

このコードを追加できます：

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

Answer 18

単にこのbs3-upgradeヘルパーを間隔とテキストの整列に使用してください...

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

Answer 19

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>

Answer 20

私のトリック。それほどきれいではありませんが、私にとってはうまくいきます

<p>&nbsp;</p>