Question

我想成为同一行的选择输入和按钮。我可以开始工作，但我的输入被拉伸到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>

我缺少什么？

旁注：有没有办法让我的按钮比它中的文字宽一点？

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

为按钮指定显式宽度。在线检查以获得内联宽度

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

1 个答案: