如何在使用移动引导时使按钮组下拉。
如何在使用移动引导时使按钮组下拉。
提问于 2018-07-15 01:35:04
@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。谢谢你的帮助!
回答 1
Stack Overflow用户
发布于 2018-07-15 06:13:35
最简单的方法是实际上有一个下拉和这些链接，以及按钮组，并显示一个基于屏幕宽度的彼此。
<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>这里有几个要点：
- 我在这里创建了两组HTML元素:一个带有链接的
btn-group，一个具有相同链接的dropdown。 - 我使用
display显示/隐藏元素：d-noneonbtn-group：从头开始隐藏它d-md-flexonbtn-group：将其显示为min-width: 768px;上的柔性盒，这是用于中型设备和up的。因此，btn-group将而不是出现在手机上。d-md-noneondropdown：显示到767 of的宽度。所以dropdown会出现在手机上。justify-content-centeronbtn-group：设置justify-content: center;，以便按钮组以行为中心。
结果：
@media (最小宽度:576 and )和@media (最小宽度:768 and)
@media (最小宽度:992 min)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51344607
复制相关文章
相似问题
腾讯云开发者
