Как добавить интервал между кнопками начальной загрузки как в примере? - PullRequest
Новая
       46

Как добавить интервал между кнопками начальной загрузки как в примере?

0 голосов
/ 26 июня 2019

На официальном сайте представлен исчерпывающий пример кнопки начальной загрузки, но я не могу понять, почему между кнопками есть промежуток и как сделать то же самое?Любой инструмент отладки браузера ничего не показывает: есть некоторые верхние и нижние поля, но ничего о горизонтальном интервале нет!Кто-нибудь может объяснить?

https://getbootstrap.com/docs/4.3/components/buttons/ bootstrap button example

Ответы [ 4 ]

0 голосов
/ 26 июня 2019

Интервал, который вы описываете, - это то, что происходит, когда у вас есть несколько элементов display:inline-block с кодом, который создает их каждый в отдельной строке. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<p>These buttons will appear with spacing between them.</p>

<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>

<hr />

<p>These buttons will not.</p>

<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>

Существует несколько способов добавить интервал вручную, используя служебный класс .m-*-* или другой пользовательский CSS. Или вы можете просто вывести свой HTML с каждой кнопкой на новой строке.

0 голосов
/ 26 июня 2019

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

Если вы откроете инспектор элементов Google, то на самом деле это будет 2 maring и 6px отступа слева и справа.из кнопок.Это не относится к кнопкам, которые вы используете в своих шаблонах.

0 голосов
/ 26 июня 2019

Поскольку вы используете bootstrap 4, вы также можете добавить класс «mr-1» к своим кнопкам;Таким образом, вам не нужно менять CSS (если вы не хотите :)).

0 голосов
/ 26 июня 2019

Просто добавьте в свои стили что-то вроде: 

button.btn {
    margin: 0 1px;
}

Но будьте уверены, что это не повлияет на другие стили, которые вы написали до

...