如何在 Bootstrap 中换行?,我可以使用 <br>
但我想知道我是否可以使用 boostrap 执行此操作并避免插入 <br>
在我的代码中。
我想在按钮和 之间留一个空格col-md-12
jsfiddle:https://jsfiddle.net/y9mznrna/
CSS:
.col-md-8 {
border: 1px solid red;
}
.col-md-4 {
border: 1px solid blue;
}
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>
最佳答案
首先,按钮应该在它自己的行内。现在你只有一个孤儿 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>
和造型:
.col-md-8 {
border: 1px solid red;
}
.col-md-4 {
border: 1px solid blue;
}
.headline-date {
margin-bottom: 30px;
}
示例:https://jsfiddle.net/y9mznrna/1/
关于html - 如何在 Bootstrap 3.3.7 中换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43679348/