获取两个表单按钮并排显示 bootstrap

Question

我正在尝试让这两个按钮并排显示。不知道为什么他们一直显示在彼此之上。我正在使用 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>

Answer 1

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

  <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>

Answer 2

按钮可以 "grouped" 在一起：

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

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

Answer 3

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

float: left;
width: 45%;

但最简单的方法就是删除 btn-block class。

<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>

获取两个表单按钮并排显示 bootstrap

Get two form buttons to display next to each other in bootstrap

python

twitter-bootstrap

flask-wtforms