我在我的网站上实现了 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>
最佳答案
我不知道为什么你的代码不起作用,但你想要实现的就像将按钮的宽度设置为 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>
演示
关于html - 使用 Bootstrap dropdown-toggle 填充 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55168181/