Col-xs-6 divs mit Margen immer

Question

Das Bild Stapel am Ende zeigt, was ich machen soll. Die Col-xs-6 Divs sind das Hauptproblem hier; Ich gebe ihnen eine Hintergrundfarbe, damit jedes col-xs-6 wie ein Panel aussieht, was bedeutet, dass ich auch eine sichtbare Trennung zwischen jedem col-xs-6 brauche.

Aber alle Versuche überhaupt Margen den col-xs-6 divs zuzuweisen, führt dazu, dass sie sich gegenseitig nebeneinander stapeln, unabhängig davon, ob ich auf Mobil- oder Desktop-Auflösung teste.

[EDIT: Angeforderte code]

<div class="row"> 
    <div class="col-xs-12 col-sm-10 col-sm-offset-1" style="padding-left:0px; padding-right:0px"> 
     <div class="row" data-bind="with: ElementPairs()[2]"> 
      <div class="row"> 
       <div class="col-xs-6 backgroundPanel fullpad" > 
        <div class="row"> 
         <div class="col-xs-3"> 
          <!-- Picture --> 
          <img class="img-responsive img-center" src="/Content/images/Land/buttons/button_blankImage.png" style="background: url('/content/images/land/buttons/button1.png') 50% 50% cover no-repeat;"> 
         </div> 
         <div class="col-xs-9" data-bind="text: Caption">Some Caption here</div> 
        </div> 
       </div> 
       <div class="col-xs-6 backgroundPanel fullpad"> 
        <div class="row"> 
         <div class="col-xs-3"> 
          <!-- Picture --> 
          <img class="img-responsive img-center" src="/Content/images/Land/buttons/button_blankImage.png" style="background: url('/content/images/land/buttons/button2.png') 50% 50% cover no-repeat;"> 
         </div> 
         <div class="col-xs-9" data-bind="text: Caption">Some other caption here and additional description.</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

jedoch überhaupt keine Versuche Ränder auf den col-xs-6 divs Ergebnisse in ihnen untereinander an Seite, anstatt seitlich anreihbar zuweisen, unabhängig davon, ob ich bin Tests auf mobile oder vollständige Desktop Auflösung.

Dies ist der Schlüssel für die Antwort. Dies ist, wie die Spalten arbeiten in Bootstrap 3:

• grid
• grid-framework

Wie Sie sehen können, wenn sie Raster-Layout erstellen, von 12 Säulen, sie berechnen Breiten in Prozentsätze und entsprechende Polster und Ränder. Jede Spalte schwebt auf left (oder right für RTL).

Wenn eine der Spalten breiter wird als „Standard“ berechneten Wert (in Ihrem Fall, dass Sie zusätzlichen Marge hinzugefügt), dann zwei div-Blöcke mit einer Breite col-*-6 sind mehr in einer Zeile nicht passend, und der letzte Schwimmer nach links in der nächsten Zeile sieht es aus wie es gestapelt wurde. Dies ist, was passiert in Ihrem Fall (obwohl ich nicht ausschließen, dass Sie einfach mit den Haltepunkten versaut :) - aber Sie haben das Code-Snippet in der Frage nicht zur Verfügung gestellt).

Wenn Sie die Ränder vergrößern möchten, müssen Sie gleichzeitig den gleichen Abstand von den Paddings/Breite jeder Spalte gleichzeitig geben - responsive spielen und die entsprechenden Breakpoints aktualisieren. Normalerweise tut dies niemand manuell. Es wird empfohlen, less oder sass Mixins zu verwenden, um das neue Raster mit Ihren neuen Parametern zu erzeugen. Das Thema wurde gut erklärt on their official website.

p.s.Vergessen Sie nicht, jede Spalte beim Verschachteln von Spalten mit row zu umbrechen. Es ist ein häufiger Fehler, Zeilen nicht in das Layout einzufügen, sie sind notwendig.

Answer 2

Die Bootstrap Gittersystem COL- * Elemente erfordert mit "Reihe" gewickelt werden: http://getbootstrap.com/css/#grid-example-basic

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 
<div class="row"> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
    <div class="clearfix visible-xs-block"></div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
</div> 

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<div class="row"> 
 
    <div class="col-xs-12 col-sm-6 col-md-8"> 
 
    <div class="panel panel-success"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title">Some Title</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <p>Some Body Content Comes here</p> 
 
     </div> 
 
     <div class="panel-footer"> 
 
     <p> some footer content of a box comes here</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-6 col-md-4"> 
 
    <div class="panel panel-danger"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title">Some Title</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <p>Some Body Content Comes here</p> 
 
     </div> 
 
     <div class="panel-footer"> 
 
     <p> some footer content of a box comes here</p> 
 
     </div> 
 
    </div></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-6 col-sm-4"> 
 
    <div class="panel panel-warning"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title">Some Title</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <p>Some Body Content Comes here</p> 
 
     </div> 
 
     <div class="panel-footer"> 
 
     <p> some footer content of a box comes here</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4"> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title">Some Title</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <p>Some Body Content Comes here</p> 
 
     </div> 
 
     <div class="panel-footer"> 
 
     <p> some footer content of a box comes here</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
 
    <div class="clearfix visible-xs-block"></div> 
 
    <div class="col-xs-6 col-sm-4"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title">Some Title</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <p>Some Body Content Comes here</p> 
 
     </div> 
 
     <div class="panel-footer"> 
 
     <p> some footer content of a box comes here</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Hier ist die beste und einfachste Art der Verwendung Bootstrap als Boxen (Panels als Boxen).