Die Grenzen zwischen den Spalten Bootstrap Grid funktioniert nicht

Bin ich eine Seite erstellen in der bootstrap-wo ich mit 4 Spalten in einer Zeile. Der code: 

<div class="row text-center">
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
</div>

Habe ich eine Klasse für jede col so jeder haben könnte, eine Grenze. 

.cliente {
    margin-top:10px;
    border: #cdcdcd medium solid;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Das problem ist, dass die Grenzen werden jeweils durch die Natürliche Rinne des bootstrap-grid und das funktioniert nicht.

Könnten Sie mir bitte helfen? Danke.

  • Ich bin nicht zu sehen, etwas in Ihr code-snippet ein. Auch dein html hat nicht die Klasse cliente
  • Mauro, du hast vergessen die Klasse .cliente, werfen Sie einen Blick auf Skelly ' s Antwort, ist es richtig. Und natürlich, wenn Sie möchten, Seite, Ränder, verwenden Sie einfach border-left oder border-right, aber das ist im wesentlichen der Kern von ihm
  • Getan, @ZimSystem.
InformationsquelleAutor Mauro Barrionuevo | 2014-09-29
  1. 21

    Müssen Sie ein weiteres block-element (ie; DIV) die in den Säulen, da Bootstrap " col-*' mit der Polsterung zu schaffen, den Abstand oder "Rinne" zwischen der grid-Spalten.

     <div class="row text-center">
      <div class="col-md-3"> 
        <div class="cliente"> 
          ..
        </div>
      </div>
 </div>

    Demo: http://www.bootply.com/71ZVOWCFWu

    • Dank Skelly! Ich vergaß zu verwenden ein div in die Spalte!
    InformationsquelleAutor Zim
  2. 6

    Können Sie outline Eigenschaft. KEINE cliente div erforderlich ist.

    .row > div {
    margin-top:10px;
    padding: 20px;
    outline: 2px solid #ccc;
    outline-offset: -10px;
    -moz-outline-radius: 10px;
    -webkit-outline-radius: 10px;
 }
    InformationsquelleAutor Carlos Macias
  3. 2

    Habe ich eine version, die erfordert keine zusätzlichen Elemente, aber leiden könnte ungleichen Höhen:

    Wie kann ich eine Linie zwischen zwei Spalten mit Twitter Bootstraps grid-system

    InformationsquelleAutor Ross Angus
  4. 1

    Erweitern die outline Lösung, wenn Sie wollen, eine Grenze, kollabiert die gleiche Größe haben, wenn zwei benachbarte Spalten beide haben Grenzen, verwenden box-shadow:

    box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc;

    Den Nachteil box-shadow versus outline ist, dass box-shadow geleistet werden können von jedem browser auf eine subpixel-position, in der Erwägung, dass die Konturen und Grenzen am nächsten pixel ausgerichtet. Wenn ein box-shadow endet, bis auf eine subpixel-position, erscheint es weich oder unscharf. Der einzige Weg dies zu vermeiden ist, um sicherzustellen, dass Sie nicht Dinge tun, die bewirken, dass die Spalte ausgerichtet werden auf eine subpixel-position.

    InformationsquelleAutor Adam Leggett
Schreibe einen Kommentar