5 Karten Bootstrap mit Lücke

Question

Ich möchte einen Behälter für Button und Text mit Karte Klasse mit schwarzem transparentem Hintergrund und Rahmenradius für jede Karte wie diese machen das Problem ist das, das ich habe eine Lücke zwischen jeder Karte wie diese hier ist der Code jsfiddle

.kontribusi{ 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    border-radius: 10px; 
 
}

<div class="container-fluid text-center"> 
 
     <h3>Ayo Mulai Berkontribusi</h3><br> 
 
     <div class="row"> 
 
     <div class="kontribusi col-sm-2 col-sm-offset-1"> 
 
      <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Beri Donasi</a></h4> 
 
      <p class="card-text">Untuk masalah kesehatan perorangan & masyarakat</p> 
 
      </div> 
 
     </div> 
 
     <div class="kontribusi col-sm-2"> 
 
      <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Galang Dana</a></h4> 
 
      <p class="card-text">Untuk membuat kampanye penggalangan dana</p> 
 
      </div> 
 
     </div> 
 
     <div class="kontribusi col-sm-2"> 
 
      <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Jadi Relawan</a></h4> 
 
      <p class="card-text">Untuk bantu terlibat dalam aksi kemanusiaan di bidang kesehatan</p> 
 
      </div> 
 
     </div> 
 
     <div class="kontribusi col-sm-2"> 
 
      <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Butuh Relawan</a></h4> 
 
      <p class="card-text">Untuk dilibatkan dalam aksi kemanusiaan di bidang kesehatan</p> 
 
      </div> 
 
     </div> 
 
     <div class="kontribusi col-sm-2"> 
 
      <div class="card card-block text-xs-center" > 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4> 
 
      <p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 1

Sie können die .kontribusi Klasse aus dem Behälter div entfernen und an den inneren div statt hinzuzufügen. Dann fügen Sie dem inneren div etwas Polsterung hinzu. Hier ist jsfiddle:

https://jsfiddle.net/DTcHh/26002/

Answer 2

statt Ihrer ursprünglichen Code verwenden Sie stattdessen:

.kontribusi{ 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    border-radius: 10px; 
 
    margin:0 10px 0 10px; 
 
    }

Answer 3

Verwenden Sie diesen Code stattdessen, ich bin sicher, das wird Ihnen helfen.

/* Latest compiled and minified CSS included as External Resource*/ 
 

 

 
/* Optional theme */ 
 

 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
.wrapper{ 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    border-radius: 10px; 
 
    padding:5px; 
 
}

<div class="container-fluid text-center"> 
 
    <h3>Ayo Mulai Berkontribusi</h3> 
 
    <br> 
 
    <div class="row"> 
 
    <div class="col-sm-2 col-sm-offset-1"> 
 
     <div class="wrapper"> 
 
     <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4> 
 
      <p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <div class="wrapper"> 
 
     <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4> 
 
      <p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <div class="wrapper"> 
 
     <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4> 
 
      <p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <div class="wrapper"> 
 
     <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4> 
 
      <p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <div class="wrapper"> 
 
     <div class="card card-block text-xs-center"> 
 
      <h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4> 
 
      <p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Hallo Überprüfen Sie die folgenden Fiddle Ich hoffe, Sie sind für diese Suche Ich habe die grundlegenden Arten nicht hinzufügen, aber das grundlegende Layout machen Sie auf der Suche sind für Sie Ihren eigenen Stil anpassen können.

Ich habe gerade eine zusätzliche Spalte hinzugefügt, um die Gitter zu machen.

.col-centered { 
float: none; 
margin-right: auto; 
margin-left: auto; 
} 

Updated BootstrapGrid Fiddle

hoffe, es hilft.