Question

我想让两个按钮在同一条线上。

有什么建议吗？

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Please login your account...</h3>
                </div>
                <div class="panel-body">

                    <form action="" method="post" role="form" class="form-horizontal">

                    <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In"><input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

小提琴： http://jsfiddle.net/a65oc6f3/

Answer 1

您不希望两个按钮的宽度都为100％，请尝试以下方法：

<div class="container">
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                    <h3 class="panel-title">Please login your account...</h3>

            </div>
            <div class="panel-body">
                <form action="" method="post" role="form" class="form-horizontal">
                    <input class="btn btn-primary" style="margin-top:.75em;width: 50%; height: 32px; font-size: 13px; float:left" type="submit" name="commit" value="Sign In">
                    <input class="btn btn-primary" style="margin-top:.75em;width: 50%; height: 32px; font-size: 13px" type="submit" name="commit" value="Sign In">
                </form>
            </div>
        </div>
    </div>
</div>

小提琴：here

Answer 2

在两个按钮上将宽度设置为50％或将它们放在1X2表中并将表格的宽度设置为100％

Answer 3

刚刚更新了你的小提琴http://jsfiddle.net/a65oc6f3/9/

第一种方法：

请添加宽度：45％;两个按钮不是100％和

保证金左：5％;到你的右键或
float：右键到右键

第二种方法：

你可以添加行和两个列

如果您想在移动设备上将这些按钮放在一行中，而不是将col-xs-5添加到两个cols中例如

＆＃13;

<div class="row">
    <div class="col-md-5 col-xs-5">
       <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
    </div> <!-- col-6 closed -->

    <div class="col-md-5 col-xs-5 pull-right">
       <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
    </div> <!-- col-6 closed -->
</div> <!-- row ends -->

＆＃13;

有关更多文档，请访问bootstrap表单和按钮文档。 http://getbootstrap.com/css/#buttons

Answer 4

使用包含col-md-6类的div输入框并将输入宽度设置为100％，如下所示：

<div class="container">
 <div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Please login your account...</h3>

    </div>
    <div class="panel-body">
        <form action="" method="post" role="form" class="form-horizontal">
<div class="row">
<div class="col-md-6">
                <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px; float:left" type="submit" name="commit" value="Sign In">
</div>
<div class="col-md-6">
                    <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px" type="submit" name="commit" value="Sign In">
</div>
</div>
                </form>
            </div>
        </div>
    </div>
</div>

同一行上有两个输入按钮

4 个答案: