Блог

Главная - Вопросы по программированию - как я могу разделить количество столбцов на 2 строки равномерно в ionic?

как я могу разделить количество столбцов на 2 строки равномерно в ionic?

#html #css #angular #ionic-framework

#HTML #css #angular #ionic-framework

Вопрос:

Я разместил много столбцов в 1 строке. Когда размер экрана большой, ионные столбцы размещаются в ряд чистым способом, но в мобильном представлении Chrome, когда размер экрана мал, большинство ионных столбцов размещаются в строке, а несколько оставшихся — во втором ряду. Мой код выглядит следующим образом.

 <ion-row>
<ion-col size="3" size-sm="2">
    <ion-icon name="add-circle"></ion-icon>
    <ion-icon name="remove-circle"></ion-icon>
</ion-col>
<ion-col>
    <ion-icon name="cloud-download"></ion-icon>
</ion-col>
<ion-col>
    <ion-icon name="save"></ion-icon>
</ion-col>
<ion-col>
    <ion-icon name="settings"></ion-icon>
</ion-col>
<ion-col>
    <ion-icon [name]="icon_show_hide === 'Hide' ? 'eye-off' : 'eye'">
  </ion-icon>
</ion-col>
<ion-col>
    <ion-icon name="map"></ion-icon>
</ion-col>
<ion-col>
    <ion-icon name="triangle"></ion-icon>
</ion-col>
<ion-col>
    <ion-icon name="arrow-undo-circle"></ion-icon>
</ion-col>
<ion-col>
    <ion-icon name="arrow-redo-circle"></ion-icon>
</ion-col>
<ion-col>
    <ion-icon name="trash"></ion-icon>
</ion-col>
</ion-row>

как я могу сделать так, чтобы количество столбцов в каждой строке было таким же, как 5 столбцов в первой строке и еще 5 во второй строке?
Мне это нужно на всех мобильных устройствах.
кто-нибудь может дать мне решение этой проблемы?

Комментарии:

1. Это весь код? Если нет, пожалуйста, создайте демонстрацию через Stackblitz.

Ответ №1:

строка может содержать не более 12 единиц. вы можете разделить 12 на 5 столбцов. и для этого шаблона вы заполняете первую строку, а другой столбец находится во второй строке

     <ion-row>
    <!-- fill first row-->
    <ion-col size="5"></ion-col>
    <ion-col size="5"></ion-col>
    <ion-col size="2"></ion-col>
</ion-row>

в этом случае я заполняю строку 3 col. а также вы можете заполнить строку смещением

     <ion-row>
    <!-- fill first row-->
    <ion-col size="5" offset="2"></ion-col>
    <ion-col size="5"></ion-col>
</ion-row>

в этом случае я заполняю смещение на 2 единицы слева.

а для настройки размера экрана вы можете использовать разрешение после размера и смещения.

   <ion-row>
        <!-- fill first row-->
        <ion-col size-md="5" offset-md="2"></ion-col>
        <ion-col size="5"></ion-col>
    </ion-row>

я настраиваю свой col, когда размер экрана равен md или lover. но вы можете узнать обо всем этом в официальном разделе ionic