引导中卡的间距问题
[英]Spacing issue with cards in bootstrap
问题描述
I am trying to create a simple grid using cards. 
我正在尝试使用卡片创建一个简单的网格。 I am using ng-repeat to create cards. 我正在使用ng-repeat创建卡。 The problem is there is no spacing between each card as shown 问题是每张卡之间没有间距，如图所示
I am using the below code 我正在使用以下代码
<!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>
Can someone tell me what is wrong with my code. 有人可以告诉我我的代码有什么问题吗？
Really appreciate any suggestions. 真的很感谢任何建议。
Thanks in advance 提前致谢
2 个解决方案
解决方案1
1 2017-04-10 21:52:01
Add space between the cards: 在卡之间添加空间：
.card {
margin-right: 10px;
}
.card:last-of-type {
margin-right: 0;
}
解决方案2
1 已采纳 2017-04-10 22:46:19
The card class works perfectly well. card类效果很好。 Your images are too wide. 您的图像太宽。 Change your image class from img-fluid to img-responsive and it should work. 将图像类从img-fluid更改为img-responsive ，它应该可以工作。 At least it does on this fiddle . 至少在这种提琴上确实如此 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.