如何水平并排添加新地图？

Question

我正在使用Bootstrap 3.3.7和Angular 5.2.0。我有一个循环添加了一个新条目。条目被添加到“卡片”。但问题是它们现在是垂直添加的。我怎样才能使它们在水平方向上连续添加大约5张“卡”，因为添加了新记录，即6被转移到新行。

html和卡上的所有CSS：

.card{
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 25px 0;

    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
    border-radius: $border-radius-base;
    color: $mdb-card-body-text;
    background: $mdb-card-body-background;

    .card-height-indicator {
        margin-top: 100%;
    }

    .title{
        margin-top: 0;
        margin-bottom: 5px;
    }
    .card-image {
        height: 60%;
        position: relative;
        overflow: hidden;

        margin-left: 15px;
        margin-right: 15px;
        margin-top: -30px;
        border-radius: $border-radius-large;

        img {
            width: 100%;
            height: 100%;
            border-radius: $border-radius-large;
            pointer-events: none;
        }
        .card-title {
            position: absolute;
            bottom: 15px;
            left: 15px;
            color: $mdb-card-image-headline;
            font-size: $font-size-h4;
            text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
        }
    }

    .category:not([class*="text-"]){
        color: $gray-color;
    }
    .card-content{
        padding: 15px 20px;

        .category{
            margin-bottom: 0;
        }
    }

    .card-header{
        @include shadow-big();
        margin: -20px $margin-base 0;
        border-radius: $border-radius-base;
        padding: $padding-base;
        background-color: $gray-color;

        .title{
            color: $white-color;
        }
        .category{
            margin-bottom: 0;
            color: rgba($white-color, .62);
        }

        &.card-chart{
            padding: 0;
            min-height: 160px;

            + .content{
                h4{
                    margin-top: 0;
                }
            }
        }

        .ct-label{
            color: rgba($white-color, .7);
        }
        .ct-grid{
            stroke: rgba(255, 255, 255, 0.2);
        }
        .ct-series-a .ct-point,
        .ct-series-a .ct-line,
        .ct-series-a .ct-bar,
        .ct-series-a .ct-slice-donut{
            stroke: rgba(255,255,255,.8);
        }
        .ct-series-a .ct-slice-pie,
        .ct-series-a .ct-area{
            fill: rgba(255,255,255,.4);
        }

    }

    .chart-title{
        position: absolute;;
        top: 25px;
        width: 100%;
        text-align: center;

        h3{
            margin: 0;
            color: $white-color;
        }

        h6{
            margin: 0;
            color: rgba(255,255,255, .4);
        }

    }

    .card-footer{
        margin: 0 20px 10px;
        padding-top: 10px;
        border-top: 1px solid #eeeeee;

        .content{
            display: block;
        }

        div{
            display: inline-block;
        }
        .author{
            color: $gray-color;
        }
        .stats{
            line-height: 22px;
            color: $gray-color;
            font-size: $font-size-small;

            .material-icons{
                position: relative;
                top: 4px;
                font-size: $font-paragraph;
            }
        }

        h6{
            color: $gray-color;
        }

    }

    img{
        width: 100%;
        height: auto;
    }

    .category{
        .material-icons{
            position: relative;
            top: 6px;
            line-height: 0;
        }
    }

    .category-social{
        .fa{
            font-size: 24px;
            position: relative;
            margin-top: -4px;
            top: 2px;
            margin-right: 5px;
        }
    }

    .author{
        .avatar{
            width: 30px;
            height: 30px;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 5px;
        }

        a{
            color: $black-color;
            text-decoration: none;

            .ripple-container{
                display: none;
            }
        }
    }

    .table{
        margin-bottom: 0;

        tr:first-child td{
            border-top: none;
        }
    }

    [data-background-color="purple"]{
        background: linear-gradient(60deg, $purple-400, $purple-600);
        @include shadow-big-color($brand-primary);
    }

    [data-background-color="blue"]{
        background: linear-gradient(60deg, $blue-900, $blue-900);
        @include shadow-big-color($brand-info);
    }

    [data-background-color="green"]{
        background: linear-gradient(60deg, $green-400, $green-600);
        @include shadow-big-color($brand-success);
    }

    [data-background-color="orange"]{
        background: linear-gradient(60deg, $orange-400, $orange-600);
        @include shadow-big-color($brand-warning);
    }

    [data-background-color="red"]{
        background: linear-gradient(60deg, $red-400, $red-600);
        @include shadow-big-color($brand-danger);
    }

    [data-background-color]{
        color: $white-color;

        a{
            color: $white-color;
        }
    }
}

.card-stats{
    .title{
        margin: 0;
    }
    .card-header{
        float: left;
        text-align: center;

        i{
            font-size: 36px;
            line-height: 56px;
            width: 56px;
            height: 56px;
        }
    }
    .card-content{
        text-align: right;
        padding-top: 10px;
    }

}

.card-nav-tabs{
    .header-raised{
        margin-top: -$margin-base * 2;
    }
    .nav-tabs{
        background: transparent;
        padding: 0;
    }
    .nav-tabs-title{
        float: left;
        padding: 10px 10px 10px 0;
        line-height: 24px;
    }
}

.card-plain{
    background: transparent;
    box-shadow: none;

    .card-header{
        margin-left: 0;
        margin-right: 0;
    }
    .content{
        padding-left: 5px;
        padding-right: 5px;
    }

    .card-image{
        margin: 0;
        border-radius: $border-radius-base;

        img{
            border-radius: $border-radius-base;
        }
    }
}

.iframe-container{
    margin: 0 -20px 0;

    iframe{
        width: 100%;
        height: 500px;
        border: 0;
        @include shadow-big();
    }
}

.card-profile,
.card-testimonial{
    margin-top: 30px;
    text-align: center;

    .btn-just-icon.btn-raised{
        margin-left: 6px;
        margin-right: 6px;
    }

    .card-avatar{
        max-width: 130px;
        max-height: 130px;
        margin: -50px auto 0;
        border-radius: 50%;
        overflow: hidden;

        @include shadow-big();

        & + .content{
            margin-top: 15px;
        }
    }

    &.card-plain{
        .card-avatar{
            margin-top: 0;
        }
    }
}

<div class="col-lg-3 col-md-6 col-sm-6">
  <div *ngFor="let note of notes" >
    <div class="card-header" data-background-color="blue">
      <i class="material-icons">store</i>
    </div>
    <div class="card-content" >
      <p class="category">{{note.name}} </p>
     </div>
     <div class="card-footer">
       <div class="stats">
         <button class="button-save" ><i class="fa fa-eye"></i></button>    
         <button class="button-trash" ><i class="fa fa-trash"></i></button>     
       </div>
     </div>
   </div>
</div>

Answer 1

在以下元素上添加* ngFor

<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
      <div class="card-header" data-background-color="blue">
        <i class="material-icons">store</i>
      </div>
      <div class="card-content">
        <p class="category">{{note.name}} </p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <button class="button-save"><i class="fa fa-eye"></i></button>
          <button class="button-trash"><i class="fa fa-trash"></i></button>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
      <div class="card-header" data-background-color="blue">
        <i class="material-icons">store</i>
      </div>
      <div class="card-content">
        <p class="category">{{note.name}} </p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <button class="button-save"><i class="fa fa-eye"></i></button>
          <button class="button-trash"><i class="fa fa-trash"></i></button>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
      <div class="card-header" data-background-color="blue">
        <i class="material-icons">store</i>
      </div>
      <div class="card-content">
        <p class="category">{{note.name}} </p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <button class="button-save"><i class="fa fa-eye"></i></button>
          <button class="button-trash"><i class="fa fa-trash"></i></button>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
      <div class="card-header" data-background-color="blue">
        <i class="material-icons">store</i>
      </div>
      <div class="card-content">
        <p class="category">{{note.name}} </p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <button class="button-save"><i class="fa fa-eye"></i></button>
          <button class="button-trash"><i class="fa fa-trash"></i></button>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
      <div class="card-header" data-background-color="blue">
        <i class="material-icons">store</i>
      </div>
      <div class="card-content">
        <p class="category">{{note.name}} </p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <button class="button-save"><i class="fa fa-eye"></i></button>
          <button class="button-trash"><i class="fa fa-trash"></i></button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您需要修改Bopotstrap网格结构以连续包含5列。尝试使用以下结构，您将能够得到您想要的。

.col.col-2 {
  flex: 0 0 20%;
  max-width: 20%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col col-2">
      1 columns
    </div>
    <div class="col col-2">
      2 columns
    </div>
    <div class="col col-2">
      3 columns
    </div>
    <div class="col col-2">
      4 columns
    </div>
    <div class="col col-2">
      5 columns
    </div>
    <div class="col col-2">
      6 columns
    </div>
  </div>
</div>