css - 将按钮组分成​​两半

Question

我有一个btn-group，我想在保持同一个组的同时将其分开。目前，虽然最初该组按预期显示，但一旦我从另一侧选择按钮(“排除”)，我就无法取消选择它 - 两半似乎表现为两个组。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>   
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-9 btn-toolbar" role="toolbar">
    <div class="btn-group" data-toggle="buttons" role="group">
        <label class="btn btn-warning">
            <input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off"> Exclude
        </label>
    </div>
    <div class="btn-group" data-toggle="buttons" role="group">
        <label class="btn btn-default">
            <input type="radio" class="reason" name="reason" id="war" value="War" autocomplete="off"> War
        </label>
        <label class="btn btn-default">
            <input type="radio" class="reason" name="reason" id="peace" value="Peace" autocomplete="off"> Peace
        </label>
        <label class="btn btn-default active">
            <input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked> Both
        </label>
        <label class="btn btn-default">
            <input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off"> Total
        </label>
    </div>
</div>

JSFiddle

Answer 1

我认为您不能像那样分隔 div。我认为最简单的解决方案就是在“特殊”按钮上添加一点边距:

<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
 
<div class="col-md-9 btn-toolbar" role="toolbar">
     <div class="btn-group" data-toggle="buttons" role="group">
          <label class="btn btn-warning" style="margin-right: 10pt;">
               <input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off"> 
               Exclude
          </label>     
          <label class="btn btn-default">
              <input type="radio" class="reason" name="reason" id="used" value="War" autocomplete="off"> 
              War
          </label>
           <label class="btn btn-default">
                <input type="radio" class="reason" name="reason" id="off" value="Peace" autocomplete="off"> 
                Peace
            </label>
            <label class="btn btn-default active">
                 <input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked> 
                 Both
            </label>
            <label class="btn btn-default">
                 <input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off" > 
                 Total
            </label>
      </div>
</div>