引導中卡的間距問題
[英]Spacing issue with cards in bootstrap
問題描述
我正在嘗試使用卡片創建一個簡單的網格。 我正在使用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>
有人可以告訴我我的代碼有什么問題嗎？
真的很感謝任何建議。
提前致謝
2 個解決方案
解決方案1
1 2017-04-10 21:52:01
在卡之間添加空間：
.card {
margin-right: 10px;
}
.card:last-of-type {
margin-right: 0;
}
解決方案2
1 已采納 2017-04-10 22:46:19
滑動卡間距問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.