python之如何将按钮与 django-bootstrap3 分页放在同一行

我正在使用 django-tables2 和 django-bootstrap3 来呈现带分页的表格。我想在分页所在的同一行添加一个按钮，但我的提交按钮显示在分页下方。我应该如何使按钮与分页链接位于同一行的表格右下角对齐？

这是我的表格模板:

  <div class="row"> 
    <div class="col-md-12"> 
      <form method='POST' action='{% url "playlists:add_track" %}'>{% csrf_token %} 
        {% render_table table "django_tables2/bootstrap3.html" %} 
        <button class="btn btn-primary" type="submit" name="action">Submit</button> 
      </form> 
    </div> 
  </div> 

这是来自 tables2 应用程序的自定义 bootstrap3.html:

{% load querystring from django_tables2 %} 
{% load trans blocktrans from i18n %} 
{% load bootstrap3 %} 
 
{% if table.page %} 
    <div class="table-responsive"> 
{% endif %} 
 
{% block table %} 
    <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}> 
        {% block table.thead %} 
            <thead> 
            <tr> 
                {% for column in table.columns %} 
                    {% if column.orderable %} 
                        <th {{ column.attrs.th.as_html }}><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">{{ column.header }}</a></th> 
                    {% else %} 
                        <th {{ column.attrs.th.as_html }}>{{ column.header }}</th> 
                    {% endif %} 
                {% endfor %} 
            </tr> 
            </thead> 
        {% endblock table.thead %} 
        {% block table.tbody %} 
            <tbody> 
            {% for row in table.page.object_list|default:table.rows %} {# support pagination #} 
                {% block table.tbody.row %} 
                    <tr class="{% cycle "odd" "even" %}"> 
                        {% for column, cell in row.items %} 
                            <td {{ column.attrs.td.as_html }}>{{ cell }}</td> 
                        {% endfor %} 
                    </tr> 
                {% endblock table.tbody.row %} 
            {% empty %} 
                {% if table.empty_text %} 
                    {% block table.tbody.empty_text %} 
                        <tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr> 
                    {% endblock table.tbody.empty_text %} 
                {% endif %} 
            {% endfor %} 
            </tbody> 
        {% endblock table.tbody %} 
        {% block table.tfoot %} 
            <tfoot></tfoot> 
        {% endblock table.tfoot %} 
    </table> 
{% endblock table %} 
 
{% if table.page %} 
    {% block pagination %} 
        {% bootstrap_pagination table.page url=request.get_full_path %} 
        {#{ table.page|pagination }#} 
    {% endblock pagination %} 
    </div> 
{% endif %} 

这是呈现的输出，其中按钮显示在分页下方而不是在同一行:

请您参考如下方法:

尝试将表格和按钮放在两个相邻的列中:

<div class="row"> 
  <form method='POST' action='{% url "playlists:add_track" %}'>{% csrf_token %} 
    <div class="col-sm-10"> 
      {% render_table table "django_tables2/bootstrap3.html" %} 
    </div> 
    <div class="col-sm-2"> 
      <button class="btn btn-primary" type="submit" name="action">Submit</button> 
    </div> 
  </form> 
</div> 

更新。

表格模板:

<div class="row"> 
  <div class="col-xs-12"> 
    <form method='POST' action='{% url "playlists:add_track" %}'>{% csrf_token %} 
      {% render_table table "django_tables2/bootstrap3.html" %} 
    </form> 
  </div> 
</div> 

bootstrap3.html:

{% load querystring from django_tables2 %} 
{% load trans blocktrans from i18n %} 
{% load bootstrap3 %} 
 
{% if table.page %} 
    <div class="table-responsive"> 
{% endif %} 
 
{% block table %} 
    <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}> 
        {% block table.thead %} 
            <thead> 
            <tr> 
                {% for column in table.columns %} 
                    {% if column.orderable %} 
                        <th {{ column.attrs.th.as_html }}><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">{{ column.header }}</a></th> 
                    {% else %} 
                        <th {{ column.attrs.th.as_html }}>{{ column.header }}</th> 
                    {% endif %} 
                {% endfor %} 
            </tr> 
            </thead> 
        {% endblock table.thead %} 
        {% block table.tbody %} 
            <tbody> 
            {% for row in table.page.object_list|default:table.rows %} {# support pagination #} 
                {% block table.tbody.row %} 
                    <tr class="{% cycle "odd" "even" %}"> 
                        {% for column, cell in row.items %} 
                            <td {{ column.attrs.td.as_html }}>{{ cell }}</td> 
                        {% endfor %} 
                    </tr> 
                {% endblock table.tbody.row %} 
            {% empty %} 
                {% if table.empty_text %} 
                    {% block table.tbody.empty_text %} 
                        <tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr> 
                    {% endblock table.tbody.empty_text %} 
                {% endif %} 
            {% endfor %} 
            </tbody> 
        {% endblock table.tbody %} 
        {% block table.tfoot %} 
            <tfoot></tfoot> 
        {% endblock table.tfoot %} 
    </table> 
{% endblock table %} 
 
{% if table.page %} 
    </div> 
 
    <div class="row"> 
        <div class="col-sm-10"> 
            {% block pagination %} 
                {% bootstrap_pagination table.page url=request.get_full_path %} 
                {#{ table.page|pagination }#} 
            {% endblock pagination %} 
        </div> 
        <div class="col-sm-2"> 
{% endif %} 
 
            <button class="btn btn-primary" type="submit" name="action">Submit</button> 
 
{% if table.page %} 
        </div> 
    </div> 
{% endif %}