Html 使用Bootsrap下拉开关填充100%宽度

我在我的站点上实现了引导下拉切换按钮。 但它并没有像我需要的那个样，填满它所在列的100%宽度。 相反，它将填充到文本/字体的宽度。 如果字体较大，它将填充100%的宽度，但文本在按钮外。 如下图所示

如果我使字体变小，它将填充到字体大小。 如下图所示

如何使按钮填充100%的列宽，而不考虑字体大小？ 我试过宽度：100%；和显示：块； 我还添加了btn lg类

它旁边的下拉列表使用的是常规的，但我需要为左侧下拉列表使用

CSS向按钮添加我自己的样式（并尝试设置大小）

和我的HTML（也显示布局）

副产品过滤器

副产品




按类型排序

按类型

我不知道为什么您的代码不起作用，但您想要实现的只是将按钮的宽度设置为100%，或者使用内置类

.w-100

HTML

副产品过滤器
副产品
按类型排序
按类型
沃尔沃汽车

演示

.my-dropdown-toggle-button {
            border-radius: 1px;
            font-size: 0.8em;
            display: block;
            width: 100%;
            background-color: #f9f9f9;
            height: 47px;
            border: 1px solid #f2f2f2;
            color: #079E94;
            padding-left: 10px;
            background-image: linear-gradient(to right, 
                #f2f2f2,
                #f2f2f2 50%,
                transparent 50%,
                transparent);
            background-position: 100% 0;
            background-size: 200% 100%;
            transition: all .4s ease-in;
        }

<div class="container-fluid shop-page-main-container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3"><!-- Subnav content -->
            <div class="row">
                <div class="col-6 col-md-12 col-lg-12 col-xl-12">

                    <div class="shop-page-subnav-box">
                        <h3>
                            Filter by Product
                        </h3>
                        <hr>

                        <div class="shop-page-subnav-box-dropdown">
                            <div class="dropdown">
                                <button class="dropdown-toggle my-dropdown-toggle-button btn-lg" type="button" data-toggle="dropdown">
                                    By Product
                                    <span class="caret"></span>
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a href="#">HTML</a></li>
                                    <li><a href="#">CSS</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-12 col-lg-12 col-xl-12">
                    <div class="shop-page-subnav-box">
                        <h3>
                            Sort by Type
                        </h3>
                        <hr>
                        <select>
                            <option value="volvo"> By Type </option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col">
            <h6 class="text-muted">
                Filter by Product
            </h6>
            <div class="dropdown">
                <button class="dropdown-toggle btn w-100" type="button" data-toggle="dropdown">
                    By Product
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">HTML</a>
                    <a class="dropdown-item" href="#">CSS</a>
                </div>
            </div>
        </div>
        <div class="col">
            <h6 class="text-muted">
                Sort by Type
            </h6>
            <select class="form-control">
                <option value>By Type</option>
                <option value="volvo">Volvo</option>
            </select>
        </div>
    </div> 
</div>