Django Datepicker很好地形成了表视图 - bootstrap css问题

Question

我有一个Django应用程序，我试图在桌子顶部很好地有一个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.朋友

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%。如果您只是希望它们并排排列（标签 - >输入 - >按钮）。你必须将它们设置为display: inline-block。因此元素只会使用显示它们所需的空间。

之后，您可以只为元素设置边距以创建空格。另外你应该考虑，以像素为单位设置输入元素的宽度，否则它将非常小。