Django 부트 스트랩 3가 양식에 응답하지 않습니다

이 필드는 장고에 간단한 양식을 작성합니다 : DateField, CharField, Textarea 및 Autocomplete-light (데이터베이스에 자동 완성 쿼리). 모든 필드는 잘 작동하지만 HTML로 렌더링 할 때 브라우저 창이 작아지면 크기가 조정되지 않습니다. jumbotron을 컨테이너에 넣었을 때 버튼 만 실제로 반응했습니다 ... 다른 필드의 문제는 무엇입니까?Django 부트 스트랩 3가 양식에 응답하지 않습니다

HTML : 양식 내에서

{% load staticfiles %} 
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css"/> 
<link rel="stylesheet" href="{% static 'css/custom.css' %}" type="text/css"/> 

<body> 
    <div class="container"> 
     <div class="jumbotron"> 
        <form method='POST' action'' enctype="multipart/form-data">{% csrf_token %} 
        <div class="form-group"> 
         <table class="rica"> 
           {{ form.as_table }} 
         </table> 
        </div> 
         <input type="submit" class="btn btn-light-blue btn-md btn-block" value="INVIA RICHIESTA"> 
        </form> 
     </div> 
    </div> 
</body>

출처

2017-05-08 lausent

당신은 당신이 양식 필드가 수행 할 CSS 클래스를 지정합니다. 그에 따라 형식이 지정됩니다. 양식 필드는 일반적으로 class="form-control"을 사용하여 부트 스트랩 그래서 당신은 (이 대부분 사본이며, 내가 사용하는 실제 양식에서 붙여 넣기)와 같은 형태로 뭔가를 원하는 :

class MyModelForm(forms.ModelForm): 
    class Meta: 
     model = MyModel 
     exclude = ('id',) 
     widgets = { 
      'name' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'image' : forms.FileInput(attrs={'class' : 'form-control'}), 
      'add1' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'add2' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'add3' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'add4' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'position' : forms.TextInput(attrs={'class' : 'form-control'}), 
      'hours' : forms.Select(attrs={'class' : 'form-control'}), 
      'salary' : forms.Select(attrs={'class' : 'form-control'}), 
      'website' : forms.URLInput(attrs={'class' : 'form-control'}), 
     }

출처

2017-05-08 19:51:20 HenryM

'class': 'form-control'을 추가하고 forms.Textarea와 함께 작동합니다. 텍스트 영역은 브라우저로 크기가 조정되지만 사용자가 텍스트 영역이 회색 컨테이너에서 차단되지 않는 것보다 마우스로 너비와 높이를 제어하는 경우 가장자리 - 위의 이미지처럼. 어쨌든 autocomplete.ModelSelect2 (url = 'fly-autocomplete', attrs = { 'class': 'form-control', 'data-placeholder': 'Par', 'data-minimum- input-length ': 3}), – lausent

만약 요 사용자가 textarea의 크기를 변경하는 것을 원하지 않는다.'style = "resize : none"' – HenryM

나는 이런 식으로 문제를 부분적으로 해결했다 : "pip install django-bootstrap-form". html에서 상단 {% load bootstrap %}에 삽입하고 {{form | bootstrap}}을 사용합니다. 이제는 모든 내용이 자동 컴파일 라이트 필드를 제외하고 반응합니다. form.py에서 나는 auto = autocomplete.ModelSelect2 (url = 'fly-autocomplete', attrs = { 'class': form-control ','data-placeholder ':'Par ','data-minimum-input -length ': 3}). 어떻게 대응할 수 있습니까? – lausent

이 텍스트 상자에 class="form-control"를 넣어 당신의 텍스트 영역에 "style="resize:none을 넣어

출처

2017-05-08 20:11:12

Django 부트 스트랩 3가 양식에 응답하지 않습니다

답변

관련 문제