Fatal编程技术网
  • button/
  • Button 如何在使用bootstrap移动设备时使按钮组成为下拉列表

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

button bootstrap-4

Button 如何在使用bootstrap移动设备时使按钮组成为下拉列表,button,bootstrap-4,dropdown,responsive,Button,Bootstrap 4,Dropdown,Responsive,@介质（最小宽度：320px）{ } @介质（最小宽度：576px）{ } @介质（最小宽度：768px）{ } @介质（最小宽度：992px）{ } @介质（最小宽度：1200px）{ } 最简单的方法是实际使用一个下拉列表，其中包含这些链接以及按钮组，并根据屏幕宽度显示其中一个链接 类别 这里有几个要点： 我在这里创建了两组HTML元素：一组带有链接的btn组，另一组带有相同链接的下拉列表 我曾经显示/隐藏元素： d-noneonbtn组：从一开始就隐藏它 d-md-flexonbtn

@介质（最小宽度：320px）{
}
@介质（最小宽度：576px）{
}
@介质（最小宽度：768px）{
}
@介质（最小宽度：992px）{
}
@介质（最小宽度：1200px）{
}
最简单的方法是实际使用一个下拉列表，其中包含这些链接以及按钮组，并根据屏幕宽度显示其中一个链接


类别
这里有几个要点：
  • 我在这里创建了两组HTML元素：一组带有链接的
    btn组
    ，另一组带有相同链接的
    下拉列表
  • 我曾经显示/隐藏元素： 
    • d-none
      on
      btn组
      ：从一开始就隐藏它
    • d-md-flex
      on
      btn组
      ：在
      最小宽度：768px上显示为flexbox，适用于中等及以上设备。因此，
      btn组
      将不出现在手机上
    • d-md-none
      在
      下拉列表中：显示它，直到宽度达到767px。因此，
      下拉列表将出现在手机上
    • 调整内容中心
      在
      btn组上
      ：设置
      调整内容：中心以便按钮组位于行的中心
    • 结果: @介质（最小宽度：576px）和@介质（最小宽度：768px）

    @介质（最小宽度：992px）

    演示：

    请标记您正在使用的引导版本。如果您提供一个代码片段（）而不是一个图像，那就更好了，同时请澄清预期的输出应该是什么样子的。非常感谢你！这太完美了！