@media (min-width: 320px) {
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}<div class="container">
<div class="row">
<div class="col-lg-24 col-centered">
<div class="btn-group flex-wrap">
<a href="neckandears.html" class="btn btn-info" role="button">Necklace and Earring sets</a>
<a href="necklaces.html" class="btn btn-info" role="button">Necklaces</a>
<a href="bracelets.html" class="btn btn-info" role="button">Bracelets</a>
<a href="earrings.html" class="btn btn-info" role="button">Earrings</a>
<a href="gemstones.html" class="btn btn-info" role="button">Gemstones</a>
</div>
</div>
</div>除了我拥有的按钮栏之外，我创建的所有网站都是响应式的。HTML 已包含在内。当屏幕尺寸变为移动设备时，我希望按钮栏成为下拉菜单，以期缓解此问题。截至目前，尽管我确实有媒体查询，但我的 CSS 仅更改边框和按钮内部的颜色。我的导航栏下方的按钮栏中有 5 个按钮，当屏幕尺寸小于桌面尺寸时，我希望它是一个下拉菜单而不是按钮组。我目前正在使用柔性包装，但按钮在移动视图中只是堆叠在一起。我无法找到一种方法使按钮组本身具有响应性并像网站的其他部分一样缩小尺寸。这是我第一次使用 HTML 或 CSS。感谢您的帮助！