使用 bootstrap v3 使按钮响应所有设备答案

【问题标题】：make button's responsive for all devices using bootstrap v3使用 bootstrap v3 使按钮响应所有设备
【发布时间】：2016-05-01 22:24:06
【问题描述】：

<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+ ，我有这段代码，我必须对所有屏幕尺寸做出响应。我有按钮，它没有响应，我该怎么办。任何帮助，将不胜感激。

【问题讨论】：

只需将响应式标签添加到表单组中的按钮。例如：col-xs-12 col-md-6。同样适用于行的任何子项
你为什么在带有类行的div中使用类form-group？
你能帮我怎么做吗？我是 bootstrap 新手
Rakesh，你需要实现什么？你的问题是关于md- 屏幕上的下拉按钮？
我认为这是因为 btn-sm class .. 删除它并替换为 col-size- class 应该很好！ ..try this

标签： twitter-bootstrap css twitter-bootstrap-3 responsive-design

【解决方案1】：

有时，引导程序的内置类不足以让您选择所有内容。您必须在媒体查询中创建一些覆盖引导 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;
    }
}

【讨论】：