twitter-bootstrap - 使用 bootstrap v3 使按钮响应所有设备

Question

<div class="row form-group">
  <div class="col-md-5 col-xs-4">
    <div class="form-group">
      <label class="col-md-5 control-label">Allowance Name: </label>
      <div class="col-md-7">
        <input type="text" name="" value="" class="form-control">
      </div>
    </div>
  </div>
  <div class="col-md-5 col-xs-4">
    <div class="form-group">
      <label class="col-md-5 control-label">Allowance Amount: </label>
      <div class="col-md-7">
        <input type="text" name="" value="" class="form-control">
      </div>
    </div>
  </div>
  <div class="col-md-2 col-xs-4">
    <div class="form-group">
      <label class="col-md-5 control-label hidden">Add or remove new line </label>
      <div class="col-md-7">
        <button type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
        <button type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
      </div>
    </div>
  </div>
</div>

我正在使用 bootstrap v3+ ，我有这段代码，我必须对所有屏幕尺寸做出响应。我有按钮，它没有响应，我该怎么办。任何帮助，将不胜感激。

Answer 1

有时 bootstrap 的内置类不足以让你选择一切。 您将不得不在媒体查询中进行一些覆盖 Bootstrap CSS。在您的自定义样式表中添加以下样式，并在您的按钮中使用 btn-responsive 类(它不是 Bootstrap 的类，我只是喜欢这个类名)。在观察不同版本的屏幕后，您还可以更改样式以更改按钮。

@media (max-width: 768px) {
    .btn-responsive {
        padding:6px 6px;
        font-size:90%;
        line-height: 1;
        border-radius:3px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .btn-responsive {
        padding:4px 9px;
        font-size:90%;
        line-height: 1.2;
    }
}