버튼 크기 변경 부트 스트랩 4 (Django)

Question

장고와 함께 작업 중이며 선택 필드가있는 부트 스트랩 버튼을 나열하려고합니다. 내가 원하는 부분에 인라인이 있지만 버튼을 더 작게 만들어서 제대로 정렬하지 못하는 것 같습니다. 나는 간단한 해결책이있을 것이라고 확신하지만, 몇 시간 동안이 문제로 어려움을 겪어 왔고 나에게 맞는 것을 찾을 수없는 것처럼 보였다. button not aligned

을 그리고 여기 내 템플릿에 내 현재 코드입니다 :

<form class="form-inline" action="{% url 'displayStats:proindvleaders'%}" method="post"> 
{% csrf_token %} 
<div class="row"> 
    {{ form.as_p }} 
    <button id="submit" type="submit" class="btn btn-primary btn-sm">Submit</button> 
</div> 

난 그냥 설정 해봤가 당신에게 문제의 더 나은 아이디어를 제공하기 위해 현재와 같이 여기 사진입니다 높이 버튼 ID를 CSS로하지만 그것은 나를 위해 일하지 않는 것. 어떤 아이디어?

Answer 1

기본적으로 부트 스트랩 btn 클래스에는 패딩이 있습니다. 브라우저에서 코드를 검사하고 패딩 클래스를 새로 추가하거나 사용자 정의 스타일 클래스를 사용하여 패딩을 제거하고 btn, btn-primary 등을 제거합니다. 버튼을 사용하지 않고 폼을 편집하는 것이 좋습니다. 부트 스트랩 기본 버튼은 대부분의 시나리오에 적합하며 대부분 양식 스타일이 필요합니다. 양식 스타일을 제안합니다. 다음은 코드 예제입니다. 시는 - 특히 '형태'로 내 경우에는 실제로 내가 전화로 회신하고있어, 코드가

{% for field in form %}
<div class="fieldWrapper">{{ field.errors }} <input type="{{ field.field.widget.input_type }}" name="{{ field.html_name }}" id="{{field.id_for_label}}" class="col-12 input-login" placeholder="{{field.label}}" > {% if field.help_text %} <p class="help">{{ field.help_text|safe }}</p> {% endif %} </div> {% endfor %}