web-dev-qa-db-ja.com

Bootstrap 3-小さい画面の列の上部マージン

X個の列が可能な行があります。

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <!-- ... and so on ... -->
    </div>
</div>

ここで、すべての小さな画面の列にmargin-top:20pxを追加し、4つ以上ある場合は2つの「行」が表示され、その間にいくらかのスペースが必要になるため、大きな画面の列に同じマージンを追加します。

CSSを使用するだけでどうにか可能ですか？

csscss3twitter-bootstraptwitter-bootstrap-3media-queries
18
n00b

上マージンが必要なときはいつでもメディアクエリを使用できます。

@media (max-width: 767px) {
    .col-xs-6 {
        margin-top:20px;
    }
}

http://www.bootply.com/126007

追伸-合計.col-*の.rowが12を超える（つまり： http://getbootstrap.com/css/#grid-example-mixed ）。それは単にラップを引き起こします。この手法を使用するドキュメントにはいくつかの例があります。通常、ネストした行には理想的ではありません。

30
Zim

似たようなものが必要だったので、私が思いついたソリューションを次に示します。将来の読者（および私）のために文書化する

$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);

@for $r from 1 through 10{
  @each $res-abbr, $res-vals in $res-list{
    @media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
      @each $dir-abbr, $dir-name in $dir-list{
        $x: $r * 5;
        .m#{$dir-abbr}-#{$res-abbr}-#{$x}{
          margin-#{$dir-name}: #{$x}px;
        }
        .m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
          margin-#{$dir-name}: #{$r}unquote('%');
        }
      }
    }
  }
}

このSASSコードは、次の行に沿ってクラスを生成します

@media (min-width: 0px) and (max-width: 767px) {
    .mt-xs-5 { margin-top: 5px; }
    .mt-xs-1p { margin-top: 1%; }
    .mr-xs-5 { margin-right: 5px; }
    .mr-xs-1p { margin-right: 1%; }
    .mb-xs-5 { margin-bottom: 5px; }
    .mb-xs-1p { margin-bottom: 1%; }
    .ml-xs-5 { margin-left: 5px; }
    .ml-xs-1p { margin-left: 1%; } 
}

したがって、コンテンツエディターは.mt-xs-10を使用して、margin-top: 10px画面上の特定の要素にextra-smallを適用できます。

私はそれが誰かを助けることを願っています。

6
Ejaz

これは古い投稿ですが、以下はクリーンなソリューションです。

[class*="col-"] {
  margin-bottom: 15px;
}

これは状況によってはうまく機能しますが、不要な場合は余分な不要なマージンを追加します。これを解決するために、列が積み重ねられたときに上余白を適用する新しいcssクラスを作成できます。 .row-gridという名前のクラスを作成します

.row.row-grid [class*="col-"] + [class*="col-"] {
  margin-top: 15px;
}

@media (min-width: 1200px) {
  .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
    margin-top: 0;
  }
}
2
Muhammad Tanweer

このシンプルでクリーンなソリューションを使用します。

.row { margin-top: -15px; }
.row > div { margin-top: 15px; }

そのようにして、すべての<div class='col-*-*'>は、最初の行（または、モバイルの場合は一番上の行を除く）を除く15pxのマージンを持ちます。

0
Marco Panichi

この簡単なソリューションは、最初の列を除くすべての列に、余分な小さな画面サイズで上マージンを自動的に適用します。 HTMLやCSSに特別なクラス名やその他の変更を加える必要はありません。 （変更 margin-top以下の値を好きなものに。）

@media (max-width: 767px) {
  [class*="col-"]:not(:first-child) {
    margin-top: 30px;
  }
}
0
komlenic