2017-05-08 39 views
1

不響應我寫在Django一個簡單的形式與該字段:的DateField,CharField,TextArea和自動填充光(查詢數據庫以自動完成)。所有字段都可以正常工作,但是當我使用html進行渲染時,瀏覽器窗口變小時不會調整大小。我把jumbotron放在一個容器中,只有按鈕實際上是響應式的......其他領域的問題是哪個?Django的自舉3形式

enter image description here

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> 

回答

0

在你的表格要指定要表單域採取的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'}), 
     } 
+0

我添加「類」:「形式控制」和現在與forms.Textarea(文本區域現在瀏覽器調整工作,但如果用戶控制寬度並與小鼠比文本區域的高度不灰色容器方框邊緣像上述圖像無論如何不作品autocomplete.ModelSelect2(URL =「飛自動完成」,ATTRS = {「類」:「形控制」,「數據佔位符」:「帕」,「數據最小 - 輸入長度':3}), – lausent

+0

如果喲你不希望用戶改變使用文本區域的大小'風格=「調整大小:無」' – HenryM

+0

我偏soved的問題是這樣的:「PIP安裝Django的自舉形式」。 在我插入頂部{%load bootstrap%}並使用{{form | bootstrap}}之後的html中。現在除autocompile-light字段外,所有內容都是響應式的。在forms.py中,我定義了auto = autocomplete.ModelSelect2(url ='fly-autocomplete',attrs = {'class':'form-control','data-placeholder':'Par','data-minimum-input長度':3})。我如何使它響應? – lausent

0

class="form-control"你的文本框,並把style="resize:none「你的textarea