使用Twitter Bootstrap添加垂直空白？

作者: 日耀九洲
发布时间: 2024-10-02 12:26:30 (6天前)
转自：

13 条回复

0#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 包装有效，但当你想要一个空间时，我喜欢： </p> <pre> <code> <div class="col-xs-12" style="height:50px;"></div> </code> </pre> </DIV>

编辑
1#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只是用 <code> <br/> </code> 。我发现自己在这里寻找这个问题的答案然后觉得有点傻到没有考虑使用用户JayKilleen在评论中建议的简单换行符。 </p> </DIV>

编辑
2#
回复此人
❀⚘粉༵红༵回༵忆༵⚘❀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 很抱歉在这里挖一个古老的坟墓，但为什么不这样做呢？ </p> <pre> <code> <div class="form-group">   </div> </code> </pre> <P> 它会在正常表单元素的高度上添加一个空格。 </p> <P> 看起来表格上的大约1行约为50px（我刚检查过的元素为47px）。这是一种水平形式，左边2col上有标签，右边10col上有输入。所以你的像素可能不同。 </p> <P> 由于我的基本上是50px，我会创建一个50px高的垫片，没有边距或填充; </p> <pre> <code> .spacer { margin:0; padding:0; height:50px; } <div class="spacer"></div> </code> </pre> </DIV>

编辑
3#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <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> </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> </DIV>

编辑
4#
回复此人
一别而尽几念深i | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我只用各种高度创建了一个div类，即 </p> <pre> <code> <div class="divider-10"></div> </code> </pre> <P> CSS是： </p> <pre> <code> .divider-10 { width:100%; min-height:1px; margin-top:10px; margin-bottom:10px; display:inline-block; position:relative; } </code> </pre> <P> 只需为需要的高度创建一个分隔类。 </p> </DIV>

编辑
5#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 没有比干更多的东西了 </p> <pre> <code> .btn { margin-bottom:5px; } </code> </pre> </DIV>

编辑
6#
回复此人
溪林 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我的把戏。不优雅，但它有效： </p> <pre> <code> <p> </p> </code> </pre> </DIV>

编辑
7#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我知道这是旧的，但我来到这里寻找同样的事情，我发现Bootstrap有帮助块，非常方便这些情况： </p> <pre> <code> <div class="help-block"></div> </code> </pre> </DIV>

编辑
8#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我知道这已经过时了，已经发布了几个很好的解决方案，但这个解决方案对我有用 </p> <pre> <code> <style> .divider{ margin: 0cm 0cm .5cm 0cm; } </style> </code> </pre> <P> 然后 </p> <pre> <code> <div class="divider"></div> </code> </pre> </DIV>

编辑
9#
回复此人
757461156 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我试过用 <code> <div class="control-group"> </code> 它并没有改变我的布局。它没有增加垂直空间。对我有用的解决方案是： </p> <pre> <code> <ol style="visibility:hidden;"></ol> </code> </pre> <P> 如果这没有给你足够的垂直空间，你可以通过添加嵌套来逐步获得更多 <code> <li> </li> </code> 标签。 </p> </DIV>

编辑
10#
回复此人
木木 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于版本3，似乎没有“引导”方式来实现这一点。 </p> <P> 一个 <code> panel </code> ，一个 <code> well </code> 和a <code> form-group </code> 都提供一些垂直间距。 </p> <P> 显然，更正式的特定垂直间距解决方案是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> </DIV>

编辑
11#
回复此人
北极星微控 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在v2中，没有任何内置用于那么多的垂直空间，所以你需要坚持使用自定义类。对于较小的高度，我通常只是抛出一个 <code> <div class="control-group"> </code> 围绕一个按钮。 </p> </DIV>

编辑

登录后才能参与评论