Bootstrap 移动垂直间距

Question

我正在使用 Twitter 的 Bootstrap 来设计一个网站，但我发现在移动视图上控制网站的垂直间距存在问题，因为切换到移动视图时元素要么粘在一起，要么相距太远。

boostrap 是否提供了任何增加或减少间距的功能，例如用于水平间隙的 col-xx-offset-#？

或者还有其他标准方法可以控制吗？

内联样式的代码示例：

https://jsfiddle.net/6e513k5o/

<div class="container">
        <div>
            <div style="color: #555;border: 3px solid #ed008c;border-radius: 4px; padding:10px" class="col-md-offset-2 col-md-3">
                <img class="img-responsive" style="margin:auto" src="http://placehold.it/231x213">
            </div>
            <div style="color: #555;border: 3px solid #ed008c;border-radius: 4px; padding:10px;margin-top:100px;margin-left:-3px;" class="col-md-3">
                <div style="text-align:center">
                    <label>
                        Mr. John Doe
                    </label>
                    <br>
                    <p>
                        CEO
                    </p>
                </div>
            </div>
        </div>
    </div>

Answer 1

在<div class="container">之后使用<div class="row">

Answer 2

bootstrap 的好处是您可以根据需要对其进行自定义。

请为列添加自定义边距。请找到更新的小提琴。

https://jsfiddle.net/6e513k5o/6/

HTML

<div class="container">
  <div class="row">
    <div class="col-md-offset-2  col-md-3 custom-class">
      <img class="img-responsive" style="margin:auto" src="http://placehold.it/231x213">
    </div>
    <div class="col-md-3 custom-class">
      <div style="text-align:center">
        <label>
          Mr. John Doe
        </label>
        <br>
        <p>
          CEO
        </p>
      </div>
    </div>
  </div>

</div>

CSS

.custom-class {
  color: #555;
  border: 3px solid #ed008c;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}