Заполните 100% ширину с помощью выпадающего-переключателя Bootsrap

Question

Я реализовал кнопку-переключатель Bootstrap на моем сайте. Но он не заполняет 100% ширину столбца, в котором он находится, как мне нужно. Вместо этого он заполняет его до ширины текста / шрифта. Если шрифт больше, он будет заполнен на 100% ширины, но текст находится за пределами кнопки. Согласно изображению ниже.

Если я уменьшу шрифт, он заполняет его до размера шрифта. Согласно изображению ниже.

Как сделать так, чтобы кнопка заполняла 100% ширины столбца, независимо от размера шрифта? Я пробовал ширина: 100%; И дисплей: блок; Я также добавил класс 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>

DEMO

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