html - 使用 Bootstrap dropdown-toggle 填充 100% 宽度

Question

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

如果我把字体变小，它会填充到字体的大小。如下图所示。

无论字体大小如何，如何使按钮填充 col 的 100% 宽度？我试过 width: 100%; 和 display: block;我还添加了 btn-lg 类。

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

。

将我自己的样式添加到按钮(并尝试设置大小)的 CSS。

.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;
        }

还有我的 HTML(也显示布局)

<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>

Answer 1

我不知道为什么你的代码不起作用，但你想要实现的就像将按钮的宽度设置为 100% 一样简单，或者使用内置类 .w-100.

HTML

<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>

演示

https://jsfiddle.net/davidliang2008/j1b49fts/7/