获取两个表单按钮以在引导程序中彼此相邻显示答案

【问题标题】：Get two form buttons to display next to each other in bootstrap获取两个表单按钮以在引导程序中彼此相邻显示
【发布时间】：2016-01-27 16:21:59
【问题描述】：

我正在尝试让这两个按钮彼此相邻显示。不知道为什么他们一直在彼此重叠显示。我正在使用 flask-wtf 和 bootstrap 3。

  <div class="container">
    <div class="row">
        <div class="col-xs-11 col-sm-5 col-lg-5 center-block">
            <form class="form-horizontal">
            <div class="form-group">
                <label for="title" class="control-label">Save:</label>

                {{ form.title(class="form-control input-lg", type="text", id="title"  ) }}

            </div>

            <div class="form-group">
            {{ form.submit(class="btn btn-danger btn-lg btn-block") }}
            {{ form.submit_2(class="btn btn-primary btn-lg btn-block") }}
            {{ form.csrf_token }}
            </div>
            </form>
        </div>
    </div>
  </div>

【问题讨论】：

标签： python twitter-bootstrap flask-wtforms

【解决方案1】：

不要使用 btn-block 类。这使得显示类型块而不是内联块。如果由于某种原因您必须使用 btn-block，那么您必须将元素向左浮动并设置它们的宽度。

float: left;
width: 45%;

但最简单的就是删除 btn-block 类。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
    <div class="row">
        <div class="col-xs-11 col-sm-5 col-lg-5 center-block">
            <form class="form-horizontal">
            <div class="form-group">
                <label for="title" class="control-label">Save:</label>

            </div>

            <div class="form-group">
            <div class="btn btn-danger btn-lg"> </div>
            <div class="btn btn-primary btn-lg"> </div>

            </div>
            </form>
        </div>
    </div>
  </div>

【讨论】：

做到了，谢谢。是的，我的方式有点老套，这看起来好多了

【解决方案2】：

想通了。只需要将行分成两部分。

  <div class="container">
    <div class="row">
        <div class="col-xs-11 col-sm-5 col-lg-5 center-block">
            <form class="form-horizontal">
            <div class="form-group">
                <label for="title" class="control-label">Save:</label>

                {{ form.title(class="form-control input-lg", type="text", id="title"  ) }}

            </div>

            <div class="form-group">
            <div class="col-xs-6">
            {{ form.submit(class="btn btn-danger btn-lg btn-block") }}
            </div>
            <div class="col-xs-6">
            {{ form.submit_2(class="btn btn-primary btn-lg btn-block") }}
            </div>
            {{ form.csrf_token }}
            </div>
            </form>
        </div>
    </div>
  </div>

【讨论】：

【解决方案3】：

这些按钮可以“组合”在一起：

<div class="btn-group">
  {{ button1 }}
  {{ button2 }}
</div>

请注意，它们将连接在一起（之间没有空格）。

【讨论】：

由于某种原因，当我尝试将它们堆叠在一起时