引导程序中卡的间距问题答案

【问题标题】：Spacing issue with cards in bootstrap引导程序中卡的间距问题
【发布时间】：2017-04-12 06:45:45
【问题描述】：

我正在尝试使用卡片创建一个简单的网格。我正在使用 ng-repeat 创建卡片。问题是每张卡片之间没有如图所示的间距

我正在使用以下代码

<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container" ng-controller="catalogcontroller">
    <div class="row" >

        <div  dir-paginate="user in users|itemsPerPage:16">

          <div class="col-xs-6  col-sm-3 col-md-3">
            <div class="card card-block ">
              <!--Card image-->
              <div class="view overlay hm-white-slight">
                <img src="http://ia.media-imdb.com/images/M/MV5BMTU4MDU3NDQ5Ml5BMl5BanBnXkFtZTgwOTU5MDUxNTE@._V1_SX300.jpg", class="img-fluid" alt="">
                <a>
                  <div class="mask waves-effect waves-light"></div>
                </a>
              </div>
              <!--/.Card image-->
              <!--Card content-->
              <div class="card-block">
                <!--Social shares button-->
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <hr>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="d-flex flex-row-reverse">
                  <h5 class="waves-effect waves-light p-2">Read more <i class="fa fa-chevron-right"></i>
                  </h5>
                </a>
              </div>
              <!--/.Card content-->
            </div>
          </div>

        </div>
      </div>
    <dir-pagination-controls
            max-size="5"
            direction-links="false"
            boundary-links="false" >
    </dir-pagination-controls>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script src="js/dirPagination.js"></script>
<script src="js/movieflix.module.js"></script>
<script src="js/catalog.controller.js"></script>
</body>
</html>

谁能告诉我我的代码有什么问题。

非常感谢任何建议。

提前致谢

【问题讨论】：

card 是 Bootstrap 3.3.7 的一个特性吗？我在文档中找不到它。我只知道 Bootstrap 4.alpha 中的card。

标签： html css angularjs twitter-bootstrap

【解决方案1】：

card 类运行良好。你的图片太宽了。将您的图像类从img-fluid 更改为img-responsive，它应该可以工作。至少在this fiddle 上是这样。

【讨论】：

非常感谢。 img-responsive 做到了。现在工作正常。

【解决方案2】：

在卡片之间添加空格：

.card {
    margin-right: 10px;
}

.card:last-of-type {
    margin-right: 0;
}

【讨论】：

嗨斯特凡，谢谢你的建议。我试过你的代码，但它不起作用。