Question

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

我使用以下代码

＆＃13;

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

＆＃13;

有人可以告诉我我的代码有什么问题。

真的很感激任何建议。

提前致谢

Answer 1

在卡片之间添加空格：

.card {
    margin-right: 10px;
}

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

Answer 2

card课程非常有效。你的图像太宽了。将您的图片类从img-fluid更改为img-responsive，它应该可以使用。至少它在this fiddle上。

卡片在引导程序中的间距问题

2 个答案: