Question

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

是否有任何boostrap提供增加或减少间距的内容，例如水平间隙的 col-xx-offset - ＃？

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

内联样式的代码示例：

<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="row">

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

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

Bootstrap移动垂直间距

2 个答案: