Question

BootStrap3是否可以在移动设备上使用btn-block按钮并在非移动设备上设置btn？如果是的话，怎么样，谢谢。

Answer 1

而不是编写自定义样式 - 就像其他答案一样，并且也很难维护 - 您可以改为使用Bootstrap 3的内置responsive utility类。

首先，定义“移动”是什么。就个人而言，移动设备是一种糟糕的分组方式，因为有些手机具有如此高密度的显示屏，可以拥有数千像素的屏幕尺寸。这就是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%;
  }
}

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

Answer 3

或者你可以轻松地使用它：

<button type="button" class="btn hidden-xs">Button Text</button>
<button type="button" class="btn-block hidden-sm hidden-md hidden-lg">Button Text</button>

第二个按钮将显示在移动设备上，第一个按钮将显示在平板电脑，小型桌面或大型桌面等任何其他设备上。

Answer 4

使用BS 4+，你可以：

// All .btn are like .btn-sm if screen is sm or xs
@include media-breakpoint-down(sm) {
  .btn {
    @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
  }
}

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

4 个答案: