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％，或者使用内置类<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>一样简单。

HTML

{{1}}

演示

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

使用Bootsrap下拉切换填充100％的宽度

1 个答案:

HTML

演示