html - 如何在 Bootstrap 中在一行中显示输入按钮？

Question

我制作了一个小小的 Bootstrap 面板，面板底部有 3 个 Bootstrap 按钮。我想要做的是让所有按钮都在一条线上并且有一个小间隙，而不是聚在一起。这是我现在拥有的，这是它正在做的:

.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

有什么方法可以让它们保持在一行上，还是我必须将列变大？

Answer 1

您需要加宽列宽。因为您使用的是 col-lg-3 类，所以最后一个按钮换行到下一行。尝试将其更改为更大的列(即 col-lg-6)。要回答问题的第二部分，您可以添加一个 CSS 规则，例如 .btn {margin: 0 5px;} 如果您希望按钮之间有一些空间。