我做了一个小的引导面板,在面板底部有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>

正在发生的是:
html - 如何在Bootstrap的一行上显示输入按钮?-LMLPHP
https://gyazo.com/46b7c219adc26be516475c8f3b4d803d
有没有办法让他们保持在一条线上,或者我必须把这根柱子变大?

最佳答案

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

关于html - 如何在Bootstrap的一行上显示输入按钮?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35052266/

10-12 00:10
查看更多