css - ASP.NET Gridview 中的文本框未对齐

Question

这就是我的文本框出现在网格视图中的方式，它们在列中没有对齐。

网格视图

我在页脚模板中添加文本框。

你能帮我解决这个问题吗？

谢谢。

这是我的 griview 的代码，您可以检查页脚模板中具有文本框的任何列。

        <asp:GridView ID="gridService" runat="server" AllowPaging="False" AutoGenerateColumns="false" class="table table-bordered" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowCancelingEdit="gridService_RowCancelingUpdate" OnRowCreated="gridService_RowCreated" OnRowDeleting="gridService_RowDeleting" OnRowEditing="gridService_RowEditing" OnRowUpdating="gridService_RowUpdating" PageSize="8" ShowFooter="true">
            <Columns>
                <asp:TemplateField HeaderText="Username" ItemStyle-Width="20%">
                    <ItemTemplate>
                        <asp:Label ID="UsernameLabel" runat="server" Text='<%# Eval("Username")%>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="UsernameNewText" runat="server" Class="form-control"></asp:TextBox>
                    </FooterTemplate>
                    <ItemStyle Width="20%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Password" ItemStyle-Width="20%">
                    <ItemTemplate>
                        <asp:Label ID="UserPasswordLabel" runat="server" Text="****"></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="UserPasswordtext" runat="server" Text='<%# Eval("UserPassword")%>' TextMode="Password"></asp:TextBox>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="UserPasswordNewText" runat="server" Class="form-control"></asp:TextBox>
                    </FooterTemplate>
                    <ItemStyle Width="20%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Admin Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="AdminModuleLabel" runat="server" Text='<%# Eval("AdminModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="AdminModuleckb" runat="server" Checked='<%# Eval("AdminModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="AdminModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Enrollees Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="EnrolleesModuleLabel" runat="server" Text='<%# Eval("EnrolleesModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="EnrolleesModuleckb" runat="server" Checked='<%# Eval("EnrolleesModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="EnrolleesModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Transactions Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="TransactionsModuleLabel" runat="server" Text='<%# Eval("TransactionsModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="TransactionsModuleckb" runat="server" Checked='<%# Eval("TransactionsModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="TransactionsModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Configuration Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="ConfigurationModuleLabel" runat="server" Text='<%# Eval("ConfigurationModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="ConfigurationModuleckb" runat="server" Checked='<%# Eval("ConfigurationModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="ConfigurationModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Statistics Module" ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:Label ID="StatisticsModuleLabel" runat="server" Text='<%# Eval("StatisticsModule")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="StatisticsModuleckb" runat="server" Checked='<%# Eval("StatisticsModule").ToString() == "True" ? true : false %>' />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:CheckBox ID="StatisticsModulenewckb" runat="server" />
                    </FooterTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateField>
                <asp:CommandField ButtonType="Image" CancelImageUrl="~/Content/images/cancel.png" EditImageUrl="~/Content/images/edit.png" ShowEditButton="True" UpdateImageUrl="~/Content/images/update.png" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="lnkremove" runat="server" CommandArgument='<%# Eval("Username")%>' CommandName="delete" ImageUrl="~/Content/images/delete.png" OnClientClick="return confirm('Do you want to delete?')" Visible='<%# Eval("Username").ToString() == "Admin" ? false : true %>' />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Button ID="btnAdd" runat="server" class="btn btn-default" OnClick="AddService" Text="Add" />
                    </FooterTemplate>
                </asp:TemplateField>
                <%--<asp:CommandField ShowDeleteButton='<%# Eval("Username").ToString() == "admin" ? true : false %>' ButtonType="Image"  DeleteImageUrl="~/Content/images/delete.png"/>--%>
            </Columns>
            <FooterStyle HorizontalAlign="Left" />
        </asp:GridView>

下面是相关的css。

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #8e8e93;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #c7c7cc;
  border-radius: 4px;  
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

标签： cssasp.netgridview