부트 스트랩 카드의 간격 문제

카드를 사용하여 간단한 눈금을 만들려고합니다. 나는 카드를 만들기 위해 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/[email protected]_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>

을 사용하고를 같이 각 카드 사이에 간격이없는 것입니다

사람은 잘못이 무엇인지 말해 줄 수 내 코드.

정말 감사드립니다. 사전에

감사 카드 사이

출처

2017-04-10 dharan

'카드'는 부트 스트랩 3.3.7의 기능입니까? 문서에서 찾을 수 없습니다. 나는 Bootstrap 4.alpha에서'card' 만 알고있다. –

. 이미지가 너무 넓습니다. 이미지 클래스를 img-fluid에서 img-responsive으로 변경하면 제대로 작동합니다. 적어도 this fiddle에 있습니다.

출처

2017-04-10 22:46:19

대단히 감사합니다. img-responsive가 트릭을 만들었습니다. 지금은 잘 작동하고 있습니다. – dharan

추가 공간 다음 card 클래스는 완벽하게 잘 작동

.card { 
    margin-right: 10px; 
} 

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

출처

2017-04-10 21:52:01 StefanBob

안녕하세요, 스테판, 귀하의 제안에 감사드립니다. 귀하의 코드를 시도했지만 작동하지 않습니다. – dharan

부트 스트랩 카드의 간격 문제

답변

관련 문제