如何让我的 GridView 在其列中占用所有可用的宽度？答案

【问题标题】：How can I get my GridView to take up all the width available to it within its column?如何让我的 GridView 在其列中占用所有可用的宽度？
【发布时间】：2021-01-21 20:23:28
【问题描述】：

在我的页面中，我有一个 GridView，它位于三列的中间（也是最大）（占据页面的一半（6/12））。但是，它显示为好像在其左侧和右侧添加了边距和/或填充。我希望它向外扩展以填满所有可用空间。

这是html：

<div class="col-6">
. . .
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"     OnDataBound="GridView1_DataBound" OnPreRender="GridView1_PreRender">
    <Columns>
        <asp:BoundField DataField="MovieTitle" HeaderText="MovieTitle" SortExpression="MovieTitle" />
        . . .
        <asp:BoundField DataField="Minutes" HeaderText="Minutes" SortExpression="Minutes" />
    </Columns>
</asp:GridView>

...这是它的外观：

（顺便说一句，数据是“假的”，不是用户选择“查找”按钮时实际返回的数据）

当然，您可以将宽度设置为绝对值，但我没有看到将其设置为相对值（例如 100% 的列宽）的方法。

我也尝试将其设置为列的宽度，但该属性并未公开让我这样做。 IOW，我通过给它一个 Id 并添加“runat server”使 div 成为一个代码隐藏元素：

<div ID="col6" runat="server" class="col-6">

...然后尝试在代码隐藏中执行此操作：

GridView1.Width = col6.Width;

...但是 col6 没有这样的公共属性。

【问题讨论】：

class="col-6" 可能有一些填充。您可以覆盖它，但它会影响一切。您可能必须使用一些 CSS hack 来做到这一点，例如 width: 102%（如果它确实有效，这可能会搞砸其他事情），或者可能是 margin-left: -10px。只是一些想法。没有工作示例很难修复。此外，它看起来还不错。
您还可以在 col-6 旁边设置类 px-0 mx-0，这将覆盖 col-6 填充/边距。但在这种情况下，如果您愿意，您将需要在某些孩子上设置填充/边距

标签： html css asp.net twitter-bootstrap gridview

【解决方案1】：

这是因为引导程序默认在其所有列上应用填充。如下代码所示：

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

此填充用于补偿引导程序在行中设置的边距，如下面的代码所示：

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

因此，如果您不希望这种情况发生，我建议您在有一行时始终申请 mx-0，当您有 col 时始终申请 px-0

这个类会是这样的：

mx-0{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
px-0{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

所以只需应用 row mx-0 和 col-6 px-0 然后你可能需要调整 col-6 中的一些 div 以获得一点空间。

【讨论】：