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

Question

我有以下 HTML:

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

这很好用，但是，我不希望按钮在大中型设备(主要是台式机)上横跨屏幕。有没有办法通过 Bootstrap 开箱即用地实现这一目标？

Answer 1

响应式 CSS。

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

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

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

您可以获取 btn 的代码, btn-primary和 btn-block来自 bootstrap.css 或 bootstrap-responsive.css(那里有一些响应式示例)，并将其放在 <style></style> 中标记或在单独的 CSS 文件中，并使用响应式 CSS 对其进行相应的编辑。