Html 如何在 Bootstrap 3.3.7 中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43679348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to do a line break in Bootstrap 3.3.7
提问by raduken
How can I do a line break in bootstrap?, I could just use <br>but I would like to know if I can do this with boostrap and avoid insert <br>in my code.
如何在引导程序中换行？，我可以使用，<br>但我想知道是否可以使用 boostrap 执行此操作并避免<br>在我的代码中插入。
I would like a empty space beetween the button and col-md-12
我想要按钮和col-md-12 之间的空白空间
jsfiddle: https://jsfiddle.net/y9mznrna/
jsfiddle: https://jsfiddle.net/y9mznrna/
css:
css：
.col-md-8 {
border: 1px solid red;
}
.col-md-4 {
border: 1px solid blue;
}
html:
html：
<div class="col-md-12">
<h2>test</h2>
<div class="headline-date">Tuesday
<button type="button" class="btn btn-primary pull-right">
<i class="fa fa-user-plus " aria-hidden="true"></i>Call
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- members table -->
<div class="col-md-8">
1
</div>
<div class="col-md-4">
2
</div>
</div>
</div>
回答by DavidG
First of all, the button should be inside it's own row. Right now you just have an orphaned col-xs-12which violates the Bootstrap standards. So doing that will separate them better. After that you need some margin between them
首先，按钮应该在它自己的行内。现在你只有一个col-xs-12违反 Bootstrap 标准的孤儿。所以这样做会更好地将它们分开。之后，您需要在它们之间留出一些余量
<div class="row">
<div class="col-md-12">
<h2>test</h2>
<div class="headline-date">Tuesday
<button type="button" class="btn btn-primary pull-right">
<i class="fa fa-user-plus " aria-hidden="true"></i>Call
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<!-- members table -->
<div class="col-md-8">
1
</div>
<div class="col-md-4">
2
</div>
</div>
</div>
And styling:
和造型：
.col-md-8 {
border: 1px solid red;
}
.col-md-4 {
border: 1px solid blue;
}
.headline-date {
margin-bottom: 30px;
}
Example: https://jsfiddle.net/y9mznrna/1/
回答by PinguinoSod
You can use an empty col with a defined height, like this:
您可以使用具有定义高度的空 col，如下所示：
HTML:
HTML：
<div class="row">
<div class="col-md-12 bs-linebreak">
</div>
</div>
CSS:
CSS：
.bs-linebreak {
height:10px;
}
Example: https://jsfiddle.net/cyo5xbef/2/
回答by Michael
Wrap the first column in a row like you did at the last content, like this:
像在最后一个内容中那样将第一列包裹在一行中，如下所示：
<div class="row">
<div class="col-md-12">
content
</div>
</div>
回答by Haque
add a margin-top:10px; in side your button style.
添加一个 margin-top:10px; 在您的按钮样式旁边。
<button style="margin-top:10px;" type="button" class="btn btn-primary pull-right">
<i class="fa fa-user-plus " aria-hidden="true"></i>Call
</button>
you can change 10px to anything you like the gap to be
您可以将 10px 更改为任何您喜欢的间隙
