Bootstrap-Raster, mit DIV und Grenzen

Ich versuche zu lernen einige Grundlagen von bootstrap. Ich möchte ein raster wie das Bild unten

Bootstrap-Raster, mit DIV und Grenzen

Was wäre der beste Weg, um es zu bekommen?

Mit div[class*=col-] {border: 1px solid #ccc} ich bin immer einige double-Grenzen :/

Danke Im Voraus!

//edit:
CSS:

.next .row {
    margin-bottom:5px;
}

.next .row [class*="col-"] {
  padding: 0;
  margin: 0;
  min-height: 50px;
  border:1px solid #ccc;
}
.next .row [class*="col-"]:last-child  {
  border-left:0;
  border-right:0;
  border-bottom:0;
  height:100%;
}

.next .row [class*="col-md"]:first-child  {
  border:none;
}

@media(min-width:992px){
    .next .row [class*="col-"]:first-child  {
      border-bottom:1px solid #ccc;
      border-right:none;
    }
}

HTML:

<div class="container next">
    <div class="row">
        <div class="col-xs-10">
            <div class="col-md-7 ">1</div>
            <div class="col-md-5 ">2</div>
        </div>
        <div class="col-xs-2">
            <div class="col-md-12 ">3</div>
        </div>
    </div>
</div>
zeigen Sie uns, was Sie haben so weit.
die Idee wäre, daneben einige Elemente mit einigen Klassen, dann die Anwendung nicht nur border: 1px solid, aber für einige von Ihnen - nur border-top, -right and -bottom für andere - top, left and bottom, und mit :nth-child und :first and -last child kontrollieren alle.

InformationsquelleAutor jimbo | 2015-01-02

  1. 1

    Versuchen Sie dies:

    div[class*=col-] {border-right: 1px solid #ccc; border-bottom:1px solid #ccc;}
div[class*=col-]:first-child {border-left: 1px solid #ccc; border-top:1px solid #ccc;}

    InformationsquelleAutor

Schreibe einen Kommentar