复选框与输入框的高度不同 - Bootstrap

Question

我希望左侧的复选框与右侧的文本输入框高度相同。

HTML：

{% block content %}
    <h1>{{ls.name}}</h1>
    <form method="post" action="#">
        {% csrf_token %}
        {% for item in ls.item_set.all %}
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    {% if item.complete == True %}
                        <input type="checkbox", value="clicked", name="c{{item.id}}" checked>
                    {% else %}
                        <input type="checkbox", value="clicked", name="c{{item.id}}">
                    {% endif %}
                </div>
            </div>
            <input type="text", value="{{item.text}}" class="form-control">
        </div>
        {% endfor %}

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <button type="submit", name = "newItem", value="newItem" class="btn btn-primary">Add Item</button>
            </div>
            <input type="text", name="new">
        </div>

        <button type="submit", name = "save", value="save" class="btn btn-primary">Save</button>
    </form>
{% endblock %}

Answer 1

给你复选框类然后在你链接的css中根据你的需要给复选框高度和宽度

<div class="input-group-text">
                    {% if item.complete == True %}
                        <input class="check" type="checkbox", value="clicked", name="c{{item.id}}" checked>
                    {% else %}
                        <input class="check" type="checkbox", value="clicked", name="c{{item.id}}">
                    {% endif %}

然后在你的 CSS 中

.check {
   height:20px;
   width:20px;
}