Question

我想使用卡片类制作按钮和文本的容器，每个卡片都有黑色透明背景和边框半径问题是我所做的那个在这样的每张卡之间有差距这里是代码jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

而不是您的初始代码使用此代替：

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

Answer 2

您可以从容器div中删除.kontribusi类，然后将其添加到内部div中。然后在内部div中添加一些填充。这是jsfiddle：

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

Answer 3

请改用此代码，我相信这会对您有所帮助。

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 4

你好检查下面的小提琴我希望你正在寻找这个我没有添加基本款式但是你要找的基本布局可以自定义你自己的风格。

我刚添加了一个额外的列来制作网格。

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

Updated BootstrapGrid Fiddle

希望它能帮助你。

5张卡片带有间隙的自举

4 个答案: