GridView页脚模板正在向右添加一个额外的列

Question

我遇到了同样的问题as this poster，我尝试了他们的解决方案。在Visual Studio的设计视图中，它看起来像我希望的那样：

然而，当我运行应用程序时，这就是它的样子：

这是我的Gridview代码：

<asp:gridview id="gridview1" runat="server" allowpaging="True" allowsorting="True" autogeneratecolumns="False" cssclass="table table-hover table-bordered table-striped table-responsive" datasourceid="sqldatasource_fetchActiveGuestList" pagesize="20" datakeynames="transactionID" showheaderwhenempty="True" showfooter="True" emptydatatext="No results returned or available.">
<Columns>
    <asp:CommandField ShowEditButton="True" />
    <asp:BoundField DataField="transactionID" HeaderText="transactionID" InsertVisible="False" ReadOnly="True" SortExpression="transactionID" Visible="False" />
    <asp:CheckBoxField DataField="isOfTypeEntrance" HeaderText="isOfTypeEntrance" SortExpression="isOfTypeEntrance" Visible="False" />
    <asp:BoundField DataField="guestName" HeaderText="Guest Name" SortExpression="guestName" />
    <asp:CheckBoxField DataField="guestHasBeenHere" HeaderText="guestHasBeenHere" SortExpression="guestHasBeenHere" Visible="False" />
    <asp:BoundField DataField="partyDesc" HeaderText="Description" SortExpression="partyDesc" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
        <HeaderStyle CssClass="visible-lg"></HeaderStyle>

        <ItemStyle CssClass="visible-lg"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField DataField="transactionDateTime" HeaderText="transactionDateTime" SortExpression="transactionDateTime" Visible="False" />
    <asp:BoundField DataField="guestEndDateTime" DataFormatString="{0:hh:mm tt}" HeaderText="End Time" HtmlEncode="False" SortExpression="guestEndDateTime" />
    <asp:BoundField DataField="pagerNumber" HeaderText="Pager Number" SortExpression="pagerNumber" />
    <asp:BoundField DataField="partySize" HeaderText="Party Size" SortExpression="partySize" />
    <asp:BoundField DataField="paymentMethod" HeaderText="Payment Method" SortExpression="paymentMethod" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md">
        <HeaderStyle CssClass="visible-md"></HeaderStyle>

        <ItemStyle CssClass="visible-md"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField DataField="totalPaymentDue" HeaderText="Total Due" SortExpression="totalPaymentDue" DataFormatString="${0}" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
        <HeaderStyle CssClass="visible-lg"></HeaderStyle>

        <ItemStyle CssClass="visible-lg"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField DataField="durationOfStayInMinutes" HeaderText="durationOfStayInMinutes" SortExpression="durationOfStayInMinutes" Visible="False" ReadOnly="True" />
    <asp:TemplateField HeaderText="Pager Returned?" SortExpression="pagerHasBeenReturned">
        <EditItemTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Bind("pagerHasBeenReturned") %>' Enabled="false" />
        </EditItemTemplate>
        <ItemTemplate>
            <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Bind("pagerHasBeenReturned") %>' CssClass="" />
        </ItemTemplate>
        <FooterTemplate>
            <asp:Button ID="btn_markAsReturned" runat="server" Text="Mark As Returned" CssClass="btn btn-primary" />
        </FooterTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="pagerReturnedDateTime" HeaderText="pagerReturnedDateTime" SortExpression="pagerReturnedDateTime" Visible="False" />
</Columns>
</asp:gridview>

我尝试将每列转换为Templatefield。我怎样才能摆脱那个额外的列？

编辑：发现问题是将响应CssClass标记添加到列中。删除后，按钮会显示应该显示的位置。将不得不弄清楚如何在不弄乱按钮位置的情况下向他们添加响应式CSS。