Question

＆＃13;

<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>

＆＃13;

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

Answer 1

有时，bootstrap的内置课程不足以完成您选择的所有内容。您必须在媒体查询中制作一些覆盖引导CSS。在自定义样式表中添加以下样式，并在按钮中使用类btn-responsive（它不是引导程序类，我就像这个类名一样）。您也可以更改样式，以便在观察不同版本的屏幕后对按钮进行更改。

@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;
    }
}

使按钮对使用bootstrap v3的所有设备做出响应

1 个答案: