сделать кнопку отзывчивой для всех устройств, используя загрузочный 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>

Я использую самозагрузки 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; 
    } 
}