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）。要回答问题的第二部分，如果要在按钮之间留出一些空格，可以添加像.btn {margin: 0 5px;}这样的CSS规则。

Answer 2

您也可以使用Start-Process属性来实现。您使用float代替display:inline-block。

或者您在float或.row

中使用3个多重分部（.col-sm，.col-md，.col-lg）

Answer 3

您可以尝试此代码

<div class="recent">
                <div class="container">
                     <div class="row">

                        <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>
                                <div class="col-lg-2"><input type="button" value="View all" onClick="#" class="btn btn-primary"></div>
                                <div class="col-lg-2"><input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger"></div>
                                <div class="col-lg-2"><input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 4

以下几点。

为什么你给最近一堂课的500分保证金？它会在响应性方面产生问题。即使您只针对桌面屏幕，也不是一个好习惯。 500个边距强制减少近期宽度。
你正在使用col-lg-3对于大于1200px宽的大屏幕使用col-lg-3可能没问题..对于小屏幕，有col-md-3，col-sm-3和col-xs-3
给按钮一点边距，使它们有一点空间。

＆＃13;

.recent 
{
    margin-top: 50px;
}

.recent input
{
    float: left;
}
.m-right{
    margin-right:5px;
}

＆＃13;

<!-- 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-sm-6">
                        <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 m-right">
                                <input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger m-right">
                                <input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning m-right">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

＆＃13;

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

4 个答案: