blocks|key|267751|text|在v2中，没有任何内置的东西来处理这么大的垂直空间，所以您需要坚持使用自定义类。对于较小的高度，我通常只需在按钮周围抛出一个<div+class="control-group">。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|267752|entityMap^0|1Q|R|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>In v2, there isn't anything built-in for that much vertical space, so you'll want to stick with a custom class. For smaller heights, I usually just throw a <code>&lt;div class="control-group"&gt;</code> around a button.</p>


blocks|key|267916|text|包装可以工作，但当你只想要一个空间时，我喜欢：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267917|<div+class="col-xs-12"+style="height:50px;"></div>|code-block|syntax|javascript|267918|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Wrapping works but when you just want a space, I like:</p>

<pre><code>&lt;div class="col-xs-12" style="height:50px;"&gt;&lt;/div&gt;
</code></pre>


blocks|key|485174|text|很抱歉在这里挖一个老坟墓，但为什么不这样做呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485175|<div+class="form-group">
++++&nbsp;
</div>|code-block|syntax|javascript|485176|它将添加一个标准形状元素高度的空间。|485177|似乎表单上的一行大约是50px+(在我刚刚检查的元素上是47px)。这是一个水平表单，标签在左侧2列，输入在右侧10列。所以你的像素可能会有所不同。|485178|由于我的基本上是50px，我会创建一个50px高的间隔，没有空白或填充；|485179|.spacer+{+margin:0;+padding:0;+height:50px;+}
<div+class="spacer"></div>|485180|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Sorry to dig an old grave here, but why not just do this?</p>

<pre><code>&lt;div class="form-group"&gt;
    &amp;nbsp;
&lt;/div&gt;
</code></pre>

<p>It will add a space the height of a normal form element.</p>

<p>It seems about 1 line on a form is roughly 50px (47px on my element I just inspected). This is a horizontal form, with label on left 2col and input on right 10col. So your pixels may vary.</p>

<p>Since mine is basically 50px, I would create a spacer of 50px tall with no margins or padding;</p>

<pre><code>.spacer { margin:0; padding:0; height:50px; }
&lt;div class="spacer"&gt;&lt;/div&gt;
</code></pre>


blocks|key|485255|text|我知道这是旧的，但我来这里寻找同样的东西，我发现Bootstrap有帮助块，对于这些情况非常方便：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485256|<div+class="help-block"></div>|code-block|syntax|javascript|485257|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I know this is old, but I came here searching for the same thing, I found that Bootstrap has the help-block, very handy for these situations:</p>

<pre><code>&lt;div class="help-block"&gt;&lt;/div&gt;
</code></pre>


blocks|key|267871|text|对于版本3，似乎没有"bootstrap“方法可以很好地实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267872|panel、well和form-group都提供了一些垂直间距。|offset|length|style|CODE|267873|显然，bootstrap+v4的路线图上有一个更正式的特定垂直间距解决方案|267874|https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550+https://github.com/twbs/bootstrap/issues/13532|267875|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550|1|https://github.com/twbs/bootstrap/issues/13532^0|0|0|5|6|4|B|A|0|0|0|1V|0|1W|1A|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]|$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]|$D|18|E|19|1|1A]]|A|$]]|$1|L|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]]]

<p>For version 3 there doesn't appear to be "bootstrap" way to achieve this neatly. </p>

<p>A <code>panel</code>, a <code>well</code> and a <code>form-group</code> all provide some vertical spacing.</p>

<p>A more formal specific vertical spacing solution is, apparently, on the roadmap for bootstrap v4 </p>

<p><a href="https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550" rel="noreferrer">https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550</a>
<a href="https://github.com/twbs/bootstrap/issues/13532" rel="noreferrer">https://github.com/twbs/bootstrap/issues/13532</a></p>


blocks|key|268245|text|我只是使用不同的高度创建了一个div类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268246|<div+class="divider-10"></div>|code-block|syntax|javascript|268247|CSS是：|268248|.divider-10+{
++++width:100%25;+
++++min-height:1px;+
++++margin-top:10px;+
++++margin-bottom:10px;++
++++display:inline-block;+
++++position:relative;
}|268249|只需为所需的高度创建一个divider类。|268250|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I merely created a div class using various heights i.e.</p>

<pre><code>&lt;div class="divider-10"&gt;&lt;/div&gt;
</code></pre>

<p>The CSS is:</p>

<pre><code>.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}
</code></pre>

<p>Just create a divider class for what ever heights are needed.</p>


blocks|key|485336|text|我的把戏。不是很优雅，但它是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485337|<p>&nbsp;</p>|code-block|syntax|javascript|485338|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>My trick. Not elegant, but it works:</p>

<pre><code>&lt;p&gt;&amp;nbsp;&lt;/p&gt;
</code></pre>


blocks|key|268320|text|我知道这是旧的，已经发布了几个很好的解决方案，但对我有效的一个简单的解决方案是以下CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268321|<style>
++.divider{
++++margin:+0cm+0cm+.5cm+0cm;
++}
</style>|code-block|syntax|javascript|268322|，然后在html中创建div。|268323|<div+class="divider"></div>|268324|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I know this is old and there are several good solutions already posted, but a simple solution that worked for me is the following CSS</p>

<pre><code>&lt;style&gt;
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
&lt;/style&gt;
</code></pre>

<p>and then create a div in your html</p>

<pre><code>&lt;div class="divider"&gt;&lt;/div&gt;
</code></pre>


blocks|key|485387|text|只需使用<br/>即可。我发现自己在这里寻找这个问题的答案，然后觉得有点傻，因为没有像用户JayKilleen在评论中建议的那样使用简单的换行符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|485388|entityMap^0|4|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Just use <code>&lt;br/&gt;</code>. I found myself here looking for the answer to this question and then felt sort of silly for not thinking about using a simple line break as suggested by user JayKilleen in a comment.</p>


blocks|key|484986|text|我尝试使用<div+class="control-group">，但它没有改变我的布局。它没有添加垂直空间。对我有效的解决方案是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|484987|<ol+style="visibility:hidden;"></ol>|code-block|syntax|javascript|484988|如果这不能为您提供足够的垂直空间，您可以通过添加嵌套的<li>&nbsp;</li>标记逐步获得更多空间。|484989|entityMap^0|5|R|0|0|R|F|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>I tried using <code>&lt;div class="control-group"&gt;</code> and it did not change my layout. It did not add vertical space. The solution that worked for me was:</p>

<pre><code>&lt;ol style="visibility:hidden;"&gt;&lt;/ol&gt;
</code></pre>

<p>If that doesn't give you enough vertical space, you can incrementally get more by adding nested <code>&lt;li&gt;&amp;nbsp;&lt;/li&gt;</code> tags.</p>


blocks|key|268217|text|<form>
+<fieldset+class="form-group"><input+type="text"+class="form-control"+placeholder="Input"/></fieldset>
+<fieldset+class="form-group"><button+class="btn+btn-primary"/>Button</fieldset>
</form>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|268218|http://v4-alpha.getbootstrap.com/components/forms/#form-controls|unstyled|offset|length|268219|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1S|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Q|8|@]|9|@$G|R|H|S|1|T]]|A|$]]|$1|I|3|-4|5|F|7|U|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|E]]]]

<pre><code>&lt;form&gt;
 &lt;fieldset class="form-group"&gt;&lt;input type="text" class="form-control" placeholder="Input"/&gt;&lt;/fieldset&gt;
 &lt;fieldset class="form-group"&gt;&lt;button class="btn btn-primary"/&gt;Button&lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>

<p><a href="http://v4-alpha.getbootstrap.com/components/forms/#form-controls" rel="nofollow">http://v4-alpha.getbootstrap.com/components/forms/#form-controls</a></p>


blocks|key|484963|text|没有比这更枯燥的了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484964|.btn+{
++++margin-bottom:5px;
}|code-block|syntax|javascript|484965|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>There is nothing more DRY than </p>

<pre><code>.btn {
    margin-bottom:5px;
}
</code></pre>


<p>What's the best way to add vertical whitespace using Twitter's Bootstrap? </p>

<p>For example, let's say that I am creating a landing page and would like a bit (100px) of blank whitespace above and below a certain button. Obviously, I could create a certain class for that particular button. But, I would think that Bootstrap should have a <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="noreferrer">DRY</a> way of adding in vertical blank spaces.</p>


Add vertical whitespace using Twitter Bootstrap?

使用Twitter的Bootstrap添加垂直空白的最佳方式是什么？例如，假设我正在创建一个登录页面，并希望在某个按钮的上方和下方留出一点(100px)空白。显然，我可以为那个特定的按钮创建一个特定的类。但是，我认为Bootstrap应该有一种在垂直空格中添加的方式。

问是否使用Twitter Bootstrap添加垂直空格？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否使用Twitter Bootstrap添加垂直空格？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否使用Twitter Bootstrap添加垂直空格？
EN