bootstrap 和 django 保持按钮和输入在同一行答案

【问题标题】：bootstrap and django keep button and input on same linebootstrap 和 django 保持按钮和输入在同一行
【发布时间】：2015-06-07 20:26:09
【问题描述】：

我想成为我的选择输入和按钮在同一行。这我可以开始工作了，但是我的输入被拉伸到 col 宽度而不是输入宽度。

我怎样才能做到这一点？

到目前为止我的代码：

<form action="{% url 'register_user' %}" method="post">
    {% csrf_token %}

    <div class="row">
    {% for field in filter_form %}
        <div class="col-md-9">
            <div class="form-group">
                {{ field|addcss:"form-control" }}
            </div>
        </div>
        <div class="col-md-3">
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        </div>
    {% endfor %}
    </div>
</form>

我错过了什么？

旁注：有什么方法可以让我的按钮比里面的文字宽一点吗？

【问题讨论】：

标签： django forms twitter-bootstrap

【解决方案1】：

首先您需要了解以下代码的作用。它创建一个宽度为页面宽度的 9/12 的列。

 <div class="col-md-9">

您可能希望执行以下操作。

<div class="col-md-9">
            <div class="form-group">
                {{ field|addcss:"form-control" }}

            <button type="submit" class="btn btn-primary btn-sm">Filter</button>

            </div>

        </div>

给按钮明确的宽度。在线检查以提供内联宽度

【讨论】：