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这样分开。我认为最简单的解决方案就是在＆＃34;特殊＆＃34;上添加一些余量。按钮：

＆＃13;

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

＆＃13;

Answer 2

这里的问题是bootstrap根据活动类将样式应用于按钮，活动类通过Javascript应用于标签。因此，单选按钮实际上是正确选择和取消选择的，它只是由样式隐藏。

以下是解决此问题的两种方法：

使用HTML＆amp; CSS：

将按钮组合成一个id为custom-group的按钮组，并添加以下css。

#custom-group label:first-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-right: 10px;
}

#custom-group label:nth-of-type(2) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

类似于kabanus的回答，这将使单个按钮组看起来像两个。

使用Javascript

保持HTML原样并添加以下javascript：

var labels = document.querySelectorAll('label');

labels.forEach(function(label) {
  label.addEventListener('click',function() {
      labels.forEach(function(l) {
        l.classList.remove('active');
    });
    label.classList.add('active');
  });
})

这将“手动”从所有按钮中删除活动类，只需将其添加到您单击的按钮即可。请务必调整标签的选择器，以免影响页面上的其他代码。

这是一个小提琴：https://jsfiddle.net/22et5z3h/4/

将按钮组拆分为一半

2 个答案: