отображать 10 элементов в одной строке

Question

Я рендеринг пузырьковой диаграммы в div. Мне нужно отобразить только 10 пузырьков для большого экрана, и количество пузырьков в строке уменьшается с уменьшением размера экрана. Я пытался задать ширину 10% для каждого пузырька, который работал на больших экранах, но он не реагировал.

.chart-padding{
  padding: 20px;
}

.ten-bubbles{
  width: 10%;
}

.qs {
  top: 25px;
  position: absolute;
  display: inline-block;
  /* display: flex; */
  left: 50%;
  margin-left: -9px;
  z-index: 2;
}

<div class="container-fluid border" style="background-color: white;width:90%;">

  <ng-container *ngIf="analytics.length > 0">
    <div class="row chart-padding">
      <div class="ten-bubbles col-sm-3 col-xs-6" style="cursor: pointer; height: 70px;" *ngFor="let prof of analytics;let i=index"
        (click)="selectedQstn = i">
        <span class="qs">Q{{i + 1}} <a href="#question-view"></a></span>
</div>
</div>
</ng-container>
</div>

Answer 1

Ваш фрагмент кода кажется неполным (отсутствует Angular?)

В любом случае, я вижу здесь два варианта:

1. Использовать Flexbox (и, возможно, заменить * 1006) * с flex-basis для .ten-bubbles) с flex-wrap: wrap на .qs.
2. Используйте @media запросы, чтобы перезаписать width для разных размеров области просмотра. Возможно, вы хотите увеличить масштаб, а не уменьшить его (например, проектируйте сначала для мобильных устройств, а затем для больших окон просмотра).

Answer 2

Если вы хотите сохранить количество видимых пузырьков до 10, но добавьте еще одну строку, ширина пузырьков должна зависеть от размера ячейки сетки, в которой они расположены. Тогда вы полностью полагаетесь на отзывчивость сетки .

Если вы хотите уменьшить эффективное количество видимых пузырьков, вы можете добавить параметр условного рендеринга, чтобы уменьшить количество пузырьков, присутствующих на меньших экранах:

<div class="ten-bubbles col-sm-3 col-xs-6" style="cursor: pointer; height: 70px;" *ngFor="let prof of analytics;let i=index"
    (click)="selectedQstn = i">
    <div ng-if="i <= 7; else hideOnSmallScreen">
        <span class="qs">Q{{i + 1}} <a href="#question-view"></a></span>
    </div>

    <!-- hide the last 3 elements on medium screens-->
    <ng-template #hideOnSmallScreen>
        <span class="qs d-md-none">Q{{i + 1}} <a href="#question-view"></a></span>
    </ng-template>
</div>