Django Datepicker 폼이 테이블 뷰 위에 멋지게 나옵니다. - bootstrap css 문제

Question

장고 앱이 있는데, 테이블 맨 위에 datepicker 검색 폼이 있습니다.

나는이 같은 배열 뭔가 달성하기 위해 노력하고 있습니다 :

을하지만이 같은 무엇입니까 :

템플릿 HTML :

.... 
    <div class="panel-body"> 
      <div class="row"> 
      <form action="{% url 'employee-attendance_search_date' %}" method="POST" enctype="multipart/form-data"> 
       {% csrf_token %} 

       {{ attendance_search_date_form }}         
       <button type="submit" class="btn btn-primary">Search</button>     

      </form>  
      </div>    

     <table class="table table-bordered table-hover table-striped"> 
      <thead> 
    .... 

forms.py

class AttendanceDateSearch(forms.Form): 
    search_date = forms.DateField(label='Date', required=False, widget=DateTimePicker(options={"format": "YYYY-MM-DD"})) 

검색 필드에 Datepicker를 사용하고 있습니다. https://github.com/nkunihiko/django-bootstrap3-datetimepicker

누군가가 그 종류의 준비를 위해 html/bootstrap 코드를 수정하는 데 도움이 될 수 있습니까?

Answer 1

기본적으로 입력 내용과 레이블은 display: block으로 작동하도록 설정되어 있으므로 항상 width: 100%입니다. 그냥 나란히 정렬하고 싶다면 (label-> input-> button). 그들을 display: inline-block으로 설정해야합니다. 따라서 요소는 요소를 표시하는 데 필요한 공간 만 사용하게됩니다.

이후 공백을 만들기 위해 요소 여백을 설정할 수 있습니다. 입력 요소의 너비를 픽셀 단위로 설정하는 것도 고려해야합니다. 그렇지 않으면 매우 작습니다.