Сохранять немного вертикального пространства между элементами, когда они переносятся?

Используя Bootstrap, когда я помещаю кучу элементов (например, buttons) в ряд и сужаю окно, элементы оборачиваются.

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

Живой пример (сузьте или расширите окно вывода, чтобы увидеть эффект)

Пример скриншота:
1. Достаточно широкий, заметьте пространство между кнопками
2. Оборачиваясь, заметьте, что между кнопками, расположенными друг над другом, нет места.

Я думаю, я мог бы возиться с каким-то нестандартным CSS, добавляя вертикальные поля или еще что-нибудь, но для того, чтобы сделать вещи максимально совместимыми и стандартными, мне интересно, есть ли лучший или более нативный способ исправить это в макете Bootstrap?

Ответ 1

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

Я добавил класс к родительскому элементу кнопок и унаследовал стиль к классу "btn".

HTML

<div class='container'>
    <div class='row'>
        <div class='col-xs-12 button-wrapper'>
            <button class='btn btn-primary'>Lorem ipsum dolor sit amet</button>
            <button class='btn btn-info'>consectetur adipiscing elit</button>
            <button class='btn btn-success'>sed do eiusmod tempor incididunt</button>
        </div>
    </div>
</div>

CSS

.button-wrapper .btn {
    margin-bottom:5px;
}

демонстрация

Ответ 2

С помощью Bootstrap мне всегда нравятся классы для добавления полей верхнего и нижнего полей:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom30 { margin-bottom:30px; }

Легко запомнить и быстро исправить эту проблему. Просто добавьте файл main.css.

Ответ 3

Попробуйте вот так: демо

CSS

 @media (max-width: 779px) {
     .btn{
         margin-bottom:10px;
 }

Ответ 4

Демо Используйте кнопку Margin-bottom css для кнопки.

    .btn{margin-bottom:10px;}

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

Ответ 5

Проверьте пример ниже:

Код:

.btn {
    margin: 10px auto;
}

<div class='container'>
	<div class='row'>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-info">consectetur adipiscing elit</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button>
        </div>        
        
	</div>
</div>

Ответ 6

Я использую этот метод: добавьте div с некоторым вертикальным пространством:

<div class="vspace1em"></div>

CSS

    div.vspace1em {
        clear: both;
        height: 1em;
    }