如何在使用bootstrap使用移动设备时使按钮组成为下拉列表

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个按钮，当屏幕尺寸小于桌面使用时，我希望它是一个下拉菜单，而不是按钮组。我目前正在使用flex wrap，但按钮只是在移动视图中叠加在一起。我无法找到一种方法来使按钮组本身响应并缩小到我的网站其他部分的大小。这是我第一次使用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>

Couple key points here:

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

Result:

@media（min-width：576px）和@media（min-width：768px）

@media（min-width：992px）

小提琴：https://jsfiddle.net/aq9Laaew/91190/