Bootstrap按钮组彼此相邻

Question

我在模态窗口中显示这两个按钮组。如何让它们彼此相邻显示？ （无论屏幕尺寸如何）

＆＃13;

＆＃13;

/* 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;   
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

相反，要创建两个表单组，您只能使用一个：

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一种方法可以基于覆盖从块到内联的表单组显示：

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

解决此问题的另一种方法是将表单组封装在表单内联中：

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将左拉类添加到表单组包装器