在 Django+Bootstrap 中使表單域更寬

Question

我想知道如何讓表單輸入本身占據第二列的相同部分； 我希望標簽位於一列中，輸入占第二列的相同百分比

這是我的 HTML 模板中的代碼：

<form method="POST" class="form mt-3 mb-3">
    {% csrf_token %}
    {% for field in form  %}
    <div class="form-group row">
        <label for="{{ field.name }}" class="col-sm-4 col-form-label">{{ field.label_tag }}</label>
        <div class="col-sm-6">
            {{ field }}
        </div>
    </div>
    {% endfor %}
    {% buttons %}
    <button type="submit" class="btn btn-success float-right mb-3"><i class="fa fa-plus" aria-hidden="true"></i> Create</button>
    {% endbuttons %}
</form>

Answer 1

# Apply new css class "same-width" in your style tag

.same-width:{
    width: 300px;   
}


<form method="POST" class="form mt-3 mb-3">
    {% csrf_token %}
    {% for field in form  %}
    <div class="form-group row">
        <label for="{{ field.name }}" class="col-sm-4 col-form-label">{{ field.label_tag }}</label>
        <div class="same-width">
            {{ field }}
        </div>
    </div>
    {% endfor %}
    {% buttons %}
    <button type="submit" class="btn btn-success float-right mb-3"><i class="fa fa-plus" aria-hidden="true"></i> Create</button>
    {% endbuttons %}
</form>

Answer 2

You can define a css class and add the css class for the field on Form class. 請查看以下示例。

class CustomerRegistrationForm(forms.Form):
name = forms.CharField(label='Name', widget=forms.TextInput(attrs={'class': 'form-control huge', 'placeholder': 'Name or Company Name *'}))
email = forms.CharField(label='Email', widget=forms.TextInput(attrs={'class': 'form-control huge', 'placeholder': 'Email *'}))