如何使用引导程序在使用移动设备时使按钮组成为下拉列表

Question

@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。感谢您的帮助！

Answer 1

最简单的方法是实际上也有一个包含这些链接的下拉菜单以及按钮组，并根据屏幕宽度彼此显示一个。

<div class="container">
    <div class="btn-group d-none d-md-flex justify-content-center">
        <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 class="dropdown d-md-none">
        <button class="btn btn-secondary dropdown-toggle" type="button"
            data-toggle="dropdown">
            Category  
        </button>
        <div class="dropdown-menu">
            <a href="neckandears.html" class="dropdown-item">
                Necklace and Earring sets
            </a>
            <a href="necklaces.html" class="dropdown-item">
                Necklaces
            </a>
            <a href="bracelets.html" class="dropdown-item">
                Bracelets
            </a>
            <a href="earrings.html" class="dropdown-item">
                Earrings
            </a>
            <a href="gemstones.html" class="dropdown-item">
                Gemstones
            </a>     
        </div>
    </div>
</div>

这里有几个要点：

1. 我在这里创建了 2 组 HTML 元素：一组btn-group带有链接，另一组dropdown带有相同的链接。
2. 我使用Bootstrap Utilities 类display来显示/隐藏元素：
   • d-noneon btn-group: 从一开始就隐藏它
   • d-md-flexon btn-group：将其显示为 flexbox on min-width: 768px;，适用于中型及以上设备。所以btn-group不会出现在手机上。
   • d-md-noneon dropdown：显示它直到宽度为 767px。所以dropdown会出现在手机上。
   • justify-content-centeron btn-group：设置justify-content: center;为使按钮组位于行中央。

结果：

@media（最小宽度：576px）和@media（最小宽度：768px）

@media（最小宽度：992px）

演示： https: //jsfiddle.net/davidliang2008/bxvdm53s/