wake-up-neo.com

Bootstrap 3 - Oberer Rand der Säule bei kleineren Bildschirmen

Ich habe eine Zeile mit X möglichen Spalten.

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

Jetzt möchte ich margin-top:20px zu allen kleinen Bildschirmspalten und denselben Rand für große Bildschirmspalten hinzufügen, wenn mehr als 4 vorhanden sind, da dies dazu führen würde, dass zwei "Zeilen" angezeigt werden und daher etwas Platz benötigt wird.

Ist das irgendwie nur mit CSS möglich?

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

Sie können eine Medienabfrage verwenden, wann immer Sie den oberen Rand wünschen.

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

http://www.bootply.com/126007

P.S. - Es ist nichts Falsches daran, dass die Summe von .col-* in einem .row größer als 12 ist (dh: http://getbootstrap.com/css/#grid-example-mixed ). Es verursacht einfach eine Umhüllung. Es gibt mehrere Beispiele in den Dokumenten, die diese Technik verwenden. Es ist im Allgemeinen nicht ideal für verschachtelte Zeilen.

29
Zim

Ich brauchte etwas Ähnliches und im Folgenden ist die Lösung, die ich gefunden habe. Dokumentieren für zukünftige Leser (und mich)

$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('%');
        }
      }
    }
  }
}

Dieser SASS-Code generiert Klassen entlang der folgenden Zeilen 

@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%; } 
}

Der Inhaltseditor kann also .mt-xs-10 verwenden, um margin-top: 10px auf das angegebene Element auf dem Bildschirm extra-small anzuwenden.

Ich hoffe es hilft jemandem.

5
Ejaz

Dies ist ein alter Beitrag, aber unten ist eine saubere Lösung.

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

Dies funktioniert in einigen Situationen gut, fügt jedoch zusätzlichen, unnötigen Spielraum hinzu, wenn er nicht benötigt wird. Um dies zu lösen, können wir eine neue CSS-Klasse erstellen, die den oberen Rand auf Spalten anwendet, wenn sie gestapelt werden. Ich erstelle eine Klasse mit dem Namen .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

Ich benutze diese einfache und saubere Lösung:

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

Auf diese Weise hat jeder <div class='col-*-*'> einen Rand von 15px, mit Ausnahme derjenigen in der ersten Zeile (oder auf dem Handy, außer dem oberen).

0
Marco Panichi

Diese einfache Lösung wendet automatisch einen oberen Rand auf alle Spalten mit Ausnahme der ersten bei besonders kleinen Bildschirmgrößen an. Es sind keine speziellen Klassennamen oder andere Änderungen an HTML oder CSS erforderlich. (Ändere das margin-top Wert unten, was auch immer Sie bevorzugen.)

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