css - Twitter Bootstrap - 如何让按钮仅在超小型和小型设备上成为块级

Question

我有以下 HTML：

<a href="javascript:void(0)" class="btn btn-primary btn-block">Start</a>

这很好用，但是，我不希望按钮在中型和大型设备（主要是台式机）的屏幕上伸展。有没有办法用 Bootstrap 开箱即用地实现这一点？

Answer 1

响应式 CSS。

您可以使用标签定义 CSS 任何部分的最大宽度或/和高度@media，例如在 bootstrap-responsive.css 中。这是一个例子。

@media (min-width: 400px) and (max-width: 600px) {
    /* Code here */
}

该代码将应用于浏览器窗口宽度最小为 400 像素、最大为 600 像素的所有设备。

您可以从 bootstrap.css 或 bootstrap-responsive.css （其中的一些响应式示例）中获取代码btn，btn-primary并将btn-block其放在<style></style>标签或单独的 CSS 文件中，并使用响应式 CSS 进行相应的编辑。

Answer 2

通过将.btn-block类用作 mixin，我实现了类似的行为，同时避免了代码重复。下面是对应的less代码：

@import (reference) "node_modules/bootstrap/less/mixins.less";
@import (reference) "node_modules/bootstrap/less/variables.less";
@import (reference) "node_modules/bootstrap/less/buttons.less";

@media only screen and (max-width: @screen-xs-min) {
  .btn-block-xs {
    .btn-block;
  }
}

该类的btn-block-xs行为类似于btn-block但仅适用于width <= @screen-xs-min.