Кнопки кнопки «Bootstrap» рядом друг с другом

Question

Я показываю эти две группы кнопок в модальном окне. Как я могу заставить их отображаться рядом друг с другом? (Независимо от размера экрана)

/* CSS used here will be applied after bootstrap.css */ 
 

 
.form-group input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span { 
 
    width: 20px; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span:first-child { 
 
    display: none; 
 
} 
 
.form-group input[type="radio"] + .btn-group > label span:last-child { 
 
    display: inline-block; 
 
} 
 

 
.form-group input[type="radio"]:checked + .btn-group > label span:first-child { 
 
    display: inline-block; 
 
} 
 
.form-group input[type="radio"]:checked + .btn-group > label span:last-child { 
 
    display: none; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="form-group"> 
 
    <input type="radio" class="radio-app-status" name="fancy-checkbox-danger" id="votingStatusDenied" autocomplete="off" value="denied"> 
 
    <div class="btn-group btn-voter-status btn-disabled"> 
 
     <label for="votingStatusDenied" class="btn btn-danger"> 
 
      <span class="glyphicon glyphicon-ok"></span> 
 
      <span>&nbsp;</span> 
 
     </label> 
 
     <label for="votingStatusDenied" class="btn btn-default active votingStatusDeniedLabel"> 
 
      Deny 
 
     </label> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <input type="radio" class="radio-app-status" name="fancy-checkbox-danger" id="votingStatusApproved" autocomplete="off" value="approved"> 
 
    <div class="btn-group btn-voter-status btn-disabled"> 
 
     <label for="votingStatusApproved" class="btn btn-primary"> 
 
      <span class="glyphicon glyphicon-ok"></span> 
 
      <span>&nbsp;</span> 
 
     </label> 
 
     <label for="votingStatusApproved" class="btn btn-default active votingStatusApprovedLabel"> 
 
      Approve 
 
     </label> 
 
    </div> 
 
</div>

Answer 1

Добавить нагрузочный левый класс форм-группы обертку

Answer 2

Вместо создания двух форм-группу, которую вы можете использовать только один:

/* CSS used here will be applied after bootstrap.css */ 
 

 
.form-group input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span { 
 
    width: 20px; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span:first-child { 
 
    display: none; 
 
} 
 
.form-group input[type="radio"] + .btn-group > label span:last-child { 
 
    display: inline-block; 
 
} 
 

 
.form-group input[type="radio"]:checked + .btn-group > label span:first-child { 
 
    display: inline-block; 
 
} 
 
.form-group input[type="radio"]:checked + .btn-group > label span:last-child { 
 
    display: none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="form-group"> 
 
    <input type="radio" class="radio-app-status" name="fancy-checkbox-danger" id="votingStatusDenied" autocomplete="off" value="denied"> 
 
    <div class="btn-group btn-voter-status btn-disabled"> 
 
     <label for="votingStatusDenied" class="btn btn-danger"> 
 
      <span class="glyphicon glyphicon-ok"></span> 
 
      <span>&nbsp;</span> 
 
     </label> 
 
     <label for="votingStatusDenied" class="btn btn-default active votingStatusDeniedLabel"> 
 
      Deny 
 
     </label> 
 
    </div> 
 
    <input type="radio" class="radio-app-status" name="fancy-checkbox-danger" id="votingStatusApproved" autocomplete="off" value="approved"> 
 
    <div class="btn-group btn-voter-status btn-disabled"> 
 
     <label for="votingStatusApproved" class="btn btn-primary"> 
 
      <span class="glyphicon glyphicon-ok"></span> 
 
      <span>&nbsp;</span> 
 
     </label> 
 
     <label for="votingStatusApproved" class="btn btn-default active votingStatusApprovedLabel"> 
 
      Approve 
 
     </label> 
 
    </div> 
 
</div>

Другой подход может быть основан на переопределение дисплей форм-группы от блока к инлайн:

/* CSS used here will be applied after bootstrap.css */ 
 

 
.form-group input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span { 
 
    width: 20px; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span:first-child { 
 
    display: none; 
 
} 
 
.form-group input[type="radio"] + .btn-group > label span:last-child { 
 
    display: inline-block; 
 
} 
 

 
.form-group input[type="radio"]:checked + .btn-group > label span:first-child { 
 
    display: inline-block; 
 
} 
 
.form-group input[type="radio"]:checked + .btn-group > label span:last-child { 
 
    display: none; 
 
} 
 

 
.form-group { 
 
    display: inline; !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="form-group"> 
 
    <input type="radio" class="radio-app-status" name="fancy-checkbox-danger" id="votingStatusDenied" autocomplete="off" value="denied"> 
 
    <div class="btn-group btn-voter-status btn-disabled"> 
 
     <label for="votingStatusDenied" class="btn btn-danger"> 
 
      <span class="glyphicon glyphicon-ok"></span> 
 
      <span>&nbsp;</span> 
 
     </label> 
 
     <label for="votingStatusDenied" class="btn btn-default active votingStatusDeniedLabel"> 
 
      Deny 
 
     </label> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <input type="radio" class="radio-app-status" name="fancy-checkbox-danger" id="votingStatusApproved" autocomplete="off" value="approved"> 
 
    <div class="btn-group btn-voter-status btn-disabled"> 
 
     <label for="votingStatusApproved" class="btn btn-primary"> 
 
      <span class="glyphicon glyphicon-ok"></span> 
 
      <span>&nbsp;</span> 
 
     </label> 
 
     <label for="votingStatusApproved" class="btn btn-default active votingStatusApprovedLabel"> 
 
      Approve 
 
     </label> 
 
    </div> 
 
</div>

Другой способ решить это заключить вашу форму-группу в форм-инлайн:

/* CSS used here will be applied after bootstrap.css */ 
 

 
.form-group input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span { 
 
    width: 20px; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span:first-child { 
 
    display: none; 
 
} 
 

 
.form-group input[type="radio"] + .btn-group > label span:last-child { 
 
    display: inline-block; 
 
} 
 

 
.form-group input[type="radio"]:checked + .btn-group > label span:first-child { 
 
    display: inline-block; 
 
} 
 

 
.form-group input[type="radio"]:checked + .btn-group > label span:last-child { 
 
    display: none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="form-inline"> 
 
    <div class="form-group "> 
 
     <input type="radio" class="radio-app-status" name="fancy-checkbox-danger" id="votingStatusDenied" 
 
       autocomplete="off" value="denied"> 
 

 
     <div class="btn-group btn-voter-status btn-disabled"> 
 
      <label for="votingStatusDenied" class="btn btn-danger"> 
 
       <span class="glyphicon glyphicon-ok"></span> 
 
       <span>&nbsp;</span> 
 
      </label> 
 
      <label for="votingStatusDenied" class="btn btn-default active votingStatusDeniedLabel"> 
 
       Deny 
 
      </label> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <input type="radio" class="radio-app-status" name="fancy-checkbox-danger" id="votingStatusApproved" 
 
       autocomplete="off" value="approved"> 
 

 
     <div class="btn-group btn-voter-status btn-disabled"> 
 
      <label for="votingStatusApproved" class="btn btn-primary"> 
 
       <span class="glyphicon glyphicon-ok"></span> 
 
       <span>&nbsp;</span> 
 
      </label> 
 
      <label for="votingStatusApproved" class="btn btn-default active votingStatusApprovedLabel"> 
 
       Approve 
 
      </label> 
 
     </div> 
 
    </div> 
 
</div>