Как разрешить конфликты стиля Bootstrap и Clarity при использовании форм - PullRequest
Новая
       33

Как разрешить конфликты стиля Bootstrap и Clarity при использовании форм

0 голосов
/ 01 июля 2019

Я использую Clarity и Bootstrap вместе в проекте Angular, но конфликты стилей кажутся всплывающими, так как стили не работают должным образом.

Я пытался изменить CSS в ChromeDevTools.Я заметил, что reboot.scss может быть причиной некоторых проблем, но я не знаю, что с этим делать, если это так.

Вот код компонента. 

<h3>New Post</h3>
<form #productEditorForm="ngForm" clrForm>
  <clr-select-container>
    <label>Location</label>
    <select clrSelect name="Location" [(ngModel)]="LocationID">
      <option *ngFor="let location of Locations" [value]="location.ID">{{ location.Name }}</option>
    </select>
  </clr-select-container>
  <clr-input-container>
    <label>Images</label>
    <input clrInput #files type="file"/>
  </clr-input-container>
  <button class="btn btn-primary" type="submit">Post</button>
</form>

ожидаемое появление selectbox похоже на примеры , найденные здесь .Ожидаемое появление кнопки похоже на основную кнопку , найденную здесь ;размер шрифта кнопок должен быть .5rem, но фактический размер равен 1. Предполагаемый шрифт по умолчанию - это Metropolis, а фактический шрифт - это Segoe UI.На странице не должно быть мерцающих полос прокрутки и нестабильного содержимого, но на реальной странице есть.Куда мне идти отсюда?

1 Ответ

0 голосов
/ 02 июля 2019

Существует много реализаций угловых каруселей (эта построена на Bootstrap, но может использоваться изолированно https://ng -bootstrap.github.io / # / Getting-Start ), и они сможет обеспечить необходимую функциональность.

Если вы загрузите Bootstrap, вы захотите загрузить его до Clarity, чтобы Clarity окончательно оценила стиль.

...