我正在重复元素列表 (ng-repeat
),页面上看似随机跳过的空格最终变成空白。
当我检查元素时,Dr. Strauss 之后的下一个 div 确实是 Dr. Schimmel,这让我相信列表中没有未显示的元素。我认为这是一个CSS问题。
HTML:
<div class="row user-doctors">
<div class="col-md-4" ng-repeat="doctor in doctors |limitTo: 9">
<div class="card-white">
<div class="img-wrapper">
<div class="row" ng-show="doctor.recommend">
<div class="col-md-12"
tooltip="{{ userFirstName }} recommends Dr.
{{ doctor.last_name }}" tooltip-placement="top">
<i class="fa fa-check recommend-icon"></i>
</div>
</div>
<img src="{{doctor.photo_url}}" ng-click="goToDoctor(doctor)">
<div class="text-container">
<span>Dr. {{ doctor.last_name }}</span>
</div>
</div>
<div class="row">
<div class="col-md-2"><i class="fa fa-medkit"></i></div>
<div class="col-md-10">{{ doctor.city }}, {{ doctor.state }}</div>
<div class="col-md-2"><i class="fa fa-stethoscope"></i></div>
<div class="col-md-10">{{ doctor.specialty }}</div>
</div>
</div>
</div>
</div>
</div>
CSS
.user-doctors {
.card-white {
margin: 20px;
padding: 10px;
.img-wrapper {
position: relative;
width: 100%;
.recommend-icon {
color: #5cb85c;
position: absolute;
right: 15px;
}
}
img {
padding-bottom: 10px;
margin: 0 auto;
width: 150px;
height: auto;
}
.text-container {
position: absolute;
width: 95%;
bottom: 0;
word-wrap: break-word;
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .7));
@extend .center;
margin-bottom: 5px;
span {
font-weight: bold;
font-size: 14px;
color: white;
text-decoration: none;
}
}
.col-md-10 {
padding-left: 2px;
}
}
}
最佳答案
基本上隐藏记录不过是因为ng-show="doctor.recommend"
条件显示元素和占用空间,只是隐藏了它的内部内容。
我宁愿建议你只使用过滤器,这样会显示recommend
doctor。
ng-repeat="doctor in doctors | filter: {recommend: true} |limitTo: 9
关于html - bootstrap css 重复元素随机跳过,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35064773/