Bootrap Grid System модифицирована

Question

Допустим, у нас есть 4 кнопки и их расположение в сетке bootstrap.

<div class="row">
<button class="col-3" *ngfor="let button of buttons">{{button}}</button>
</div>

В этом примере между кнопками нет места. При использовании col-2 пространство слишком велико. Есть ли способ использовать col-3, но между кнопками все еще есть небольшое пространство?

Answer 1

Вы можете попробовать один из этих фрагментов, чтобы получить то, что вы хотите ... Это автоматически отобразит некоторое пространство между кнопками.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-3">
        <button class="col-12">{{ button }}</button>
    </div>
    <div class="col-3">
        <button class="col-12">{{ button }}</button>
    </div>
    <div class="col-3">
        <button class="col-12">{{ button }}</button>
    </div>
    <div class="col-3">
        <button class="col-12">{{ button }}</button>
    </div>
</div>

Центрируется в контейнере:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row text-center">
        <div class="col-3">
            <button class="col-12">{{ button }}</button>
        </div>
        <div class="col-3">
            <button class="col-12">{{ button }}</button>
        </div>
        <div class="col-3">
            <button class="col-12">{{ button }}</button>
        </div>
        <div class="col-3">
            <button class="col-12">{{ button }}</button>
        </div>
    </div>
</div>