bootstrap css 重复项目随机跳过

Question

我正在重复一个项目列表 (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;
      }
    }
  }

Answer 1

基本上隐藏记录不过是因为ng-show="doctor.recommend"条件显示元素占据space，只是隐藏了里面的内容

我宁愿建议您只使用会显示 recommend 医生的过滤器。

ng-repeat="doctor in doctors | filter: {recommend: true} |limitTo: 9

bootstrap css 重复项目随机跳过

bootstrap css repeated items randomly skipped

html

css

twitter-bootstrap

angularjs

angular-ui-bootstrap