Как настроить ширину адаптивно для разных размеров?

Question

[Вячеслав]

Вот картинки страницы приложения:

На первой картинке желаемы результат, на второй видим, как надписи над радиокнопками переходят на вторую строку... На большом экране все нормально, проблема с маленькими девайсами
Вот код разметки, подскажите как поправить. Использую bootstrap, мало опыта в верстке...

<div class="container-fluid">
  <div class="row" *ngFor="let skill of skills">
    <div class="col-8">
      {{ skill.name }}
    </div>
    <mat-radio-group id="radioform" [(ngModel)]="skill.value" (change)="onChange()">
        <mat-radio-button class="mvv-radio"
          *ngFor="let item of [1, 2, 3, 4]" [value]="item"
          [disabled]="skill.available < item"
          [checked]="skill.available === 1 && item === 1"
          >
            {{ item }}
        </mat-radio-button>
    </mat-radio-group>
  </div>
</div>
<hr>
<div class="progress">
  <div class="progress-bar" [ngStyle]="{'width': progressValue}" >{{ count+1 }}</div>
</div>
<div class="text-center">
  <br>
  <button 
  type="button" 
  *ngIf="!isResult"
  mdbBtn color="light" 
  mdbWavesEffect 
  (click)="getNextFormBlock()"
  [disabled]="!isComplete">Далее</button>
  <button 
  type="button" 
  *ngIf="isResult"
  mdbBtn color="success" 
  mdbWavesEffect 
  (click)="getNextFormBlock()"
  [routerLink]="[ '/result-page' ]"
  [disabled]="!isComplete">Узнать результат</button>
</div>

Answer 1

[Павел]

<div class="col-12">
      {{ skill.name }}
    </div>

А так пользуйтесь документацией бутстрапа https://getbootstrap.com/docs/4.1/layout/grid/

Comments

[Dima Polos]

Прокомментирую для автора вопроса суть решения: col-8, как у Вас этого мало для текста, поэтому он переносился, дадите ему col-12 и будет нормально.

[WapSter]

Если вам помогли, а данное решение на 100% поможет, пометте ответ решением

[Вячеслав]

Сорри, бегал в лыжне России :) Спасибо за помощь! Не догадался сразу попробовать col-12

[Вячеслав]

Но с таким вариантом на большом экране у меня теперь не в одну строчку наименование скилла и ряд радиокнопок.... Хотелось бы сохранить этот макет, когда они в одну строку.
То есть если места достаточно, то должна быть строка с наименованием и радиогруппой, а если нет (на маленьком экране) - тогда идет перенос дивов

[Павел]

Вячеслав,

<div class="col-12 col-lg-9 col-xl-8">
      {{ skill.name }}
    </div>