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

不要使用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>

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

Answer 3

按钮可以＆＃34;分组＆＃34;一起：

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

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

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

3 个答案: