我做了一个小的引导面板,在面板底部有3个引导按钮。我想做的是让所有的按钮都在一条线上,并且有一个很小的间隙,而不是聚在一起。这是我现在所拥有的,这是它所做的:
.recent
{
margin-top: 50px;
margin-right: 500px;
}
.recent input
{
float: left;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="recent">
<div class="container">
<div class="col-lg-3">
<div class="panel panel-primary">
<div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
<div class="panel-body">
<p>- Aurora, Colorado : Blah Blah Blah</p>
<input type="button" value="View all" onClick="#" class="btn btn-primary">
<input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger">
<input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning">
</div>
</div>
</div>
</div>
</div>
正在发生的是:
https://gyazo.com/46b7c219adc26be516475c8f3b4d803d
有没有办法让他们保持在一条线上,或者我必须把这根柱子变大?
最佳答案
你需要把列宽加宽。由于您使用的是col-lg-3
类,最后一个按钮将换行到下一行。尝试将其更改为更大的列(即col-lg-6
)。要回答问题的第二部分,您可以添加一个CSS规则,比如.btn {margin: 0 5px;}
,如果您想要在按钮之间留出一些空间。
关于html - 如何在Bootstrap的一行上显示输入按钮?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35052266/