Стили кнопок Bootstrap с Angular 5 до Angular 6 не имеют пробелов

Question

Недавно мы обновили Angular 5 до Angular 6.

Проблема: Стили кнопок Bootstrap теперь не имеют отступов между ними.

Bootstrap Version: 3.3.7

Например, если в html вы делаете что-то вроде этого.

<div>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-cancel">Cancel</button>
</div>

Перед обновлением у этих кнопок будет пространство для полеймежду ними.

Просто любопытно, есть ли что-то, что мы можем обновить, чтобы исправить это, или глобальный стиль CSS, который можно использовать.

Answer 1

Чтобы добавить к помеченному ответу, эта проблема вызвана настройкой preserveWhitespaces.

то, что действительно происходит за сценой, - это код вашего шаблона, например,

<div>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-cancel">Cancel</button>
</div>

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

Таким образом, это более четко показывает, почему кнопки слипаются.

<div><button class="btn btn-success">Success</button><button class="btn btn-info">Info</button><button class="btn btn-cancel">Cancel</button></div>

Вы можете применить исправление в качестве рекомендацииглобально или вы можете решить проблему с определенными компонентами, если это необходимо.https://angular.io/api/core/Component Вы заметите, что в документах для @components вы можете включить или отключить эту функцию только для этого компонента.

Еще одно решение, предложенное в комментариях, - глобально.добавить marginto ко всем классам .btn, однако это приведет к обратному побочному эффекту, когда опция когда-либо снова переключается (что дает большой запас между кнопками вместо естественного пространства)

Последнее замечание, это HTML / DOMПобочный эффект, а не Angular или CSS, вы сможете воспроизвести этот эффект практически со всеми встроенными элементами, удалив / добавив разрыв строки / пробелы между каждым элементом.

Answer 2

В моем проекте я смог восстановить пробелы по умолчанию между кнопками начальной загрузки, установив для preserveWhitespaces значение true в файле main.ts:

platformBrowserDynamic()
  .bootstrapModule(AppModule, { preserveWhitespaces: true})
  .catch(err => console.log(err));

Нашел в этом месте

Answer 3

Добавьте класс панели инструментов btn в div, чтобы получить расстояние между кнопками.Как это:

 <div class="btn-toolbar">
  <button class="btn btn-success">Success</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-cancel">Cancel</button>
</div>

Answer 4

Ссылка ответа ConnorsFan является ответом на нашу проблему.

Angular 6 по умолчанию устанавливает angularCompilerOption: preserveWhitespaces для приложения в значение false.