如何在Bootstrap中让txtSearch控件撑满父级col-8容器宽度

问题描述 #

现有如下布局代码，需要让ID为txtSearch的ig:TextBoxEditor控件拉伸至其父级col-8的DIV元素的完整宽度，尝试为col-8添加align-self-stretch类未生效：

<div class="card">
    <div class="card-header">Comments</div>
    <div class="container p-0">
        <div class="row align-items-center g-0">
            <div class="col-8 align-self-stretch">
                <ig:TextBoxEditor runat="server" ID="txtSearch" TextMode="Search" AutoPostBack="True" />
            </div>
            <div class="col">
                <div class="form-check form-switch">
                    <asp:CheckBoxNoSpan runat="server" ID="cbAdvancedFilters" CssClass="form-check-input" AutoPostBack="True" OnCheckedChanged="OnToggleGridAdvancedFilters" ></asp:CheckBoxNoSpan>
                    <asp:Label runat="server" CssClass="form-check-label" AssociatedControlID="cbAdvancedFilters">Advanced filters</asp:Label>
                </div>
            </div>
            <div class="col">
                <div class="form-check form-switch">
                    <input type="checkbox" EnableViewState="True"  class="form-check-input" runat="server" ID="cbPager" role="switch" OnServerChange="OnToggleGridPager"/>
                    <asp:Label runat="server" CssClass="form-check-label" AssociatedControlID="cbPager">Pager</asp:Label>
                </div>
            </div>
            <span class="border border-bottom border-1"></span>
        </div>
    </div>
</div>

解决方案 #

方法1：使用控件自带Width属性 #

ig:TextBoxEditor支持直接设置Width属性为100%，让控件自动填充父容器宽度：

<ig:TextBoxEditor runat="server" ID="txtSearch" TextMode="Search" AutoPostBack="True" Width="100%" />

方法2：添加自定义CSS强制覆盖 #

如果控件属性设置不生效，可通过CSS覆盖默认宽度：

1. 给控件添加自定义类：

<ig:TextBoxEditor runat="server" ID="txtSearch" TextMode="Search" AutoPostBack="True" CssClass="full-width-search" />

2. 补充页面样式：

.full-width-search {
    width: 100% !important;
    box-sizing: border-box; /* 避免内边距导致超出父容器 */
}

也可直接通过ID定位控件：

#txtSearch {
    width: 100% !important;
    box-sizing: border-box;
}

方法3：调整父容器Flex布局 #

父容器所在行的align-items-center可能限制控件拉伸，可给col-8添加d-flex类，让内部控件自动填充空间，再配合控件的Width="100%"使用：

<div class="col-8 d-flex">
    <ig:TextBoxEditor runat="server" ID="txtSearch" TextMode="Search" AutoPostBack="True" Width="100%" />
</div>

补充说明 #

align-self-stretch是控制Flex子元素在交叉轴（垂直方向）的拉伸，而你需要的是水平方向的宽度填充，所以这个类无法解决问题。核心是要让ig:TextBoxEditor本身的宽度设为100%，覆盖其默认的固定宽度样式。

内容的提问来源于stack exchange，提问作者NRG