Вертикальное пространство при укладке столбцов в Bootstrap 3

Когда столбцы укладываются в мобильный режим, я хотел бы, чтобы какое-то вертикальное пространство разделило содержимое столбца, как я могу это сделать?

См. jsfiddle в http://jsfiddle.net/tofutim/3sWEN/ и измените ширину вывода. Между вторым lorem ipsum должно быть некоторое расстояние.

enter image description here

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>               
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>                     
            </form>
        </div>
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

Ответы

Ответ 1

Один из способов - это CSS, который добавляет margin-bottom к col-* на более мелкие устройства/ширину.

@media (max-width: 768px) {

  [class*="col-"] {
      margin-bottom: 15px;
  }

}

Другой способ - добавить div, который можно увидеть только на более мелких устройствах/ширинах.

 <div class="col-sm-6">
    <div class="hidden-lg hidden-md hidden-sm">&nbsp;</div>
        ...

Демо: http://bootply.com/92276

Обновление 2017

У Bootstrap 4 теперь есть утилиты spacing, которые можно использовать.

Ответ 2

Используйте .form-group в столбцах

Это способ начальной загрузки. Другие упомянутые CSS-хаки могут работать, но не предназначены для достижения желаемого. Взлом загрузочных бутстрапов CSS может привести к дополнительной работе позже при изменении версии бутстрапа.

Пример загрузки: http://www.bootply.com/4cXfQkTCAm#

Ответ 3

Я хотел, чтобы он работал, когда мои столбцы стека меньше 991px и эффект всех, кроме первого ребенка, поэтому я положил

@media (max-width: 991px) { 
  [class*="col-"]:not(:first-child){
      margin-top: 40px;
  }
}

Ответ 4

Посмотрите на этот пример http://getbootstrap.com/examples/carousel/ При укладке Существует разница между текстом и изображением 500 * 500. Это связано с тем, что вокруг него есть <p>, а его нижнее значение - 20px

Ответ 5

Добавьте отрицательную верхнюю границу к каждой строке и скопируйте ее в каждом столбце, например:

.row {
  margin-top: -10px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  margin-top: 10px;
}

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

Работает со всеми размерами экрана.