В документации по кнопке начальной загрузки, как достигаются поля между кнопками

Question

Это не основной вопрос о "полях" с помощью начальной загрузки и т. Д. Я знаю, как использовать оба поля и как использовать начальную загрузку.

Мне особенно интересно, как, в примере, который я предоставляю в Bootstrapдокументация, они достигают своей наценки.Я не вижу, чтобы они добавляли поля или использовали flexbox или какой-либо другой метод пробелов.Должно быть, я что-то упускаю, но не знаю что.

Может кто-нибудь помочь объяснить, как они это делают?Документация: https://getbootstrap.com/docs/4.3/components/buttons/

Визуальный:

Answer 1

См. Эту демонстрационную программу codeply ниже о том, как управлять интервалом между кнопками встроенного блока в начальной загрузке 4.

https://www.codeply.com/go/Vaen7GzvNF

Увеличьте промежутки с помощью утилиты Bootstrap margin-right .mr-* classes

<button type="button" class="btn btn-primary mr-1">.mr-1</button>
<button type="button" class="btn btn-secondary mr-2">.mr-2</button>
<button type="button" class="btn btn-success mr-3">.mr-3</button>
<button type="button" class="btn btn-danger mr-4">.mr-4</button>
<button type="button" class="btn btn-warning mr-5">.mr-5</button>
<button type="button" class="btn btn-info">no class</button>

Удалите пробелы, убедившись, что между кнопками нет пробелов html

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button>

Вы также можете использовать теги комментариев <!-- -->, чтобы убрать пробелы между кнопками, если вы хотите сохранить ихпривести в порядок или использовать php

<button type="button" class="btn btn-primary">Primary</button><!--
    --><button type="button" class="btn btn-secondary">Secondary</button><!--
    --><button type="button" class="btn btn-success">Success</button><!--
    --><button type="button" class="btn btn-danger">Danger</button><!--
    --><button type="button" class="btn btn-warning">Warning</button><!--
    --><button type="button" class="btn btn-info">Info</button>