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


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


<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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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