bootstrap3不同的移动按钮大小比屏幕

Question

BootStrap3是否可以将按钮设置btn-block为移动设备和btn非移动设备？如果是的话,怎么样,谢谢.

Answer 1

而不是编写自定义样式 - 就像其他答案一样,并且也很难维护 - 您可以改为使用Bootstrap 3的内置响应实用程序类.

首先,定义"移动"是什么.就个人而言,移动设备是一种糟糕的分组方式,因为有些手机具有如此高密度的显示器,它们的屏幕尺寸可以达到数千像素.这就是Bootstrap将断点称为小型,中型,大型而不是移动,平板电脑和台式机的问题.

一旦定义了要定位的断点,就可以执行以下操作:

<button type="button" class="btn btn-primary visible-xs-block visible-sm-block">Button Text</button>

要注意的类是.visible-xs-block和 .visible-sm-block.这些将使按钮块级别处于"xs"和"sm"断点.

Answer 2

使用媒体查询：

@media (max-width: 767px) {
  .btn {
    display: block;
    width: 100%;
  }
}

使用两个按钮并不是一个特别好的做法。这不是 DRY 或可访问的。媒体查询是专门为此目的而设计的：能够允许您根据视口的大小更改样式属性。