css - 我可以根据屏幕尺寸使用 twitter bootstrap css 类吗？ (对于大按钮和普通按钮)

Question

使用 Bootstrap CSS，您可以将按钮定义为大、小或正常。但是，在某些情况下，我想使用大按钮(即添加 btn-lg 类)有条件地，例如，仅当屏幕尺寸为 md 或更大。

一个笨拙的解决方法是两次包含按钮:一次使用 btn-lg，一次不使用，常规的使用 visible-xs-(something) 和大一个带有hidden-xs，see live example .

有没有更聪明的方法来做到这一点？我可以定义一个按钮以仅在某些显示尺寸上使用 btn-lg 类吗，或者是否有某种“自动尺寸类”在某些情况下有效地导致 btn-lg 而常规按钮在其他人呢？

Answer 1

创建一个新的自定义类并将您想要的规则应用于您希望它们触发的媒体断点。然后您可以使用该类，也可以使用各个类，而不会相互冲突。

查看工作示例代码段。

body {
  text-align: center;
  padding-top: 50px;
}
/**LG Rules**/

@media (min-width: 1200px) {
  .btn.btn-mq {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
  }
}
/**SM Rules**/

@media (max-width: 1199px) {
  .btn.btn-mq {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}
/**XS Rules**/

@media (max-width: 768px) {
  .btn.btn-mq {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <h2>Default</h2>
  <div class="btn btn-danger btn-lg">BTN LG</div>
  <div class="btn btn-danger btn-sm">BTN SM</div>
  <div class="btn btn-danger btn-xs">BTN XS</div>
  <hr>
  <h2>Buttons With Media Query Rules</h2>
  <div class="btn btn-danger btn-mq">BTN LG</div>
  <div class="btn btn-danger btn-mq">BTN SM</div>
  <div class="btn btn-danger btn-mq">BTN XS</div>
  <hr>
  <h2>Button Group With Media Query Rules</h2>
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-danger btn-mq">BTN MQ</button>
    <button type="button" class="btn btn-danger btn-mq">BTN MQ</button>
    <button type="button" class="btn btn-danger btn-mq">BTN MQ</button>
  </div>
</div>
<hr>