Bootstrap 3 - 移动视图上的替换按钮答案

【问题标题】：Bootstrap 3 - Replace button on mobile viewBootstrap 3 - 移动视图上的替换按钮
【发布时间】：2015-05-31 16:25:13
【问题描述】：

我正在使用 Bootstrap 3：

<ul class="dropdown-menu btn-block">
      <li><a href="#">Reason 1</a></li>
     <!-- desktop -->
      <li><a href="#" class="visible-md visible-lg">Reason 2</a></li>
     <!-- mobile -->
      <li><a href="onClick:abc();" class="visible-xs visible-sm">Reason 3</a></li>

    </ul>

使用 Bootstrap 替换不同设备的元素（按钮、div、文本 ecc）的最佳做法是什么？

【问题讨论】：

是什么原因，他们的行为一样吗？
不，“原因 2”仅适用于 PC，“原因 3”仅适用于移动设备。
如果您真的希望其他标签可见，那么使用辅助类 visible-* 和 hidden-* 将是最佳实践。如果您只想执行其他布局更改，请使用media-queries 根据设备更改 css 样式。

标签： css mobile twitter-bootstrap-3

【解决方案1】：

为<li>reason2</li> 添加.visible-lg 并为<li>reason3</li> 添加.visible-sm。

【讨论】：