Блог

Я пытаюсь создать панель мониторинга, используя Angular Bootstrap 4. Я использовал https://getbootstrap.com/docs/4.0/layout/grid для столбцов одинаковой ширины и это работает нормально, но всякий раз, когда поле LongDescription достаточно велико, на строку отображается одна карточка. Я всегда хотел бы иметь 3 столбца в строке с переносом текстовых слов.

 <div class="container mt-5">
    <div class="row">
        <div *ngFor="let card of cards">
            <div class="col-sm">
                <div class="card p-3 mb-4">
                    <h6>{{card.longDescription}}</h6>
                </div>
            </div>
        </div>
    </div>
</div>
  

Я хочу визуально достичь следующего результата: https://bbbootstrap.com/snippets/bootstrap-list-grid-view-template-74271163

Пожалуйста, сообщите

Попробуйте этот код, этот код идеально подходит для вашего следующего результата

 <div class="container mt-5">
   <div class="row">
      <div class="col-sm-4" *ngFor="let card of cards">
          <div class="card p-3 mb-4">
              <h6>{{card.longDescription}}</h6>
          </div>
      </div>
   </div>
</div>
  

Попробуйте внести небольшие изменения в свой шаблон. Удалите дополнительный div (используемый для зацикливания) и вместо этого добавьте цикл в разделении столбцов.

 <div class="container mt-5">
    <div class="row">
        <div class="col-sm" *ngFor="let card of cards">
            <div class="card p-3 mb-4">
                <h6>{{card.longDescription}}</h6>
            </div>
        </div>
    </div>
</div>
  

Это должно решить проблему. Если нет, используйте class col-sm-4 для принудительного ввода 3 столбцов.

Используйте класс col вместо col-sm Вы не должны использовать дополнительный div для этого класса, но используйте его в div, в который вставлен цикл

 <div class="container mt-5">
    <div class="row">
        <div class="col" *ngFor="let card of cards">
              <div class="card p-3 mb-4">
                  <h6>{{card.longDescription}}</h6>
              </div>
         </div>
    </div>
</div>