Содержимое Ioni c не выравнивается должным образом - PullRequest
Новая
       37

Содержимое Ioni c не выравнивается должным образом

1 голос
/ 12 июля 2020

У меня есть 3 кнопки (Примечание: я пробовал то же самое с другими элементами, такими как 3 текста / метки / et c.)

первая кнопка должна быть в начале (крайняя левая сторона экрана),

вторая кнопка должна быть в центре экрана

3-я кнопка должна быть в конце (крайняя правая сторона экрана)

Я пытался использовать class=“ion-justify-content-between”, но проблема осталась прежней.

Вот скриншот:

enter image description here

Here is my code :


  
    
      
         хорошо  хорошо  хорошо

[Примечание: вы также можете попробовать без ion-card / ion-card-content / ion-item. Я имею в виду, что вы можете просто оставить ионную сетку, и проблема та же]

Кто-нибудь, пожалуйста, скажите мне, что пошло не так?

Ответы [ 3 ]

1 голос
/ 15 июля 2020

https://forum.ionicframework.com/t/ionic-contents-are-not-aligning-properly/192655

Rapropos с форума ioni c ответил мне на этот вопрос. Ссылка выше. Если вы там go, пожалуйста, не забудьте проверить мой ответ на комментарий, я внес дополнительные исправления после его ответа. Спасибо ему.

Так вот . html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-item>
              <ion-input type="text" placeholder="User Name / Email" [(ngModel)]="id"></ion-input>
            </ion-item>
            <ion-item>
              <ion-input type="password" placeholder="Password" [(ngModel)]="password"></ion-input>
            </ion-item>
            <ion-item>
              <ion-checkbox color="secondary" checked slot="start"></ion-checkbox>
              <ion-label class="ion-margin-left">Remember me</ion-label>
            </ion-item>
            
              <div class="outerbox ion-margin-vertical">
                <ion-button color="tertiary" size="small" (click)="forwardToNextPage1()">Sign Up</ion-button>
                <ion-button color="primary" size="small" (click)="GetALogin()">Login</ion-button>
                <ion-button color="secondary" size="small" (click)="forwardToNextPage2()">Forgot Password?</ion-button>
              </div>

         
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

вот . css

.outerbox {
  display: flex;
  justify-content: space-between;
}

Очень важное замечание:

Не помещайте div внутрь ion-item. Если вы это сделаете, все кнопки go останутся вот так

enter image description here

Use div alone. don't let anything else affect it.

введите описание изображения здесь

0 голосов
/ 15 июля 2020

Просто добавьте классы утилит ioni c в ion-col, он работает должным образом. 

<ion-grid>
    <ion-row class="ion-justify-content-between">
      <ion-col class="ion-text-start">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
      <ion-col class="ion-text-center">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
      <ion-col class="ion-text-end">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
0 голосов
/ 12 июля 2020

проще всего использовать flex. 

#container{
display:flex;
justify-content:space-between;
}
<div id='container'>
              <ion-button>ok</ion-button>
           
              <ion-button>ok</ion-button>
            
              <ion-button>ok</ion-button>
</div>
...