Question

我的网页上有一个带有引导程序的按钮栏。

我有一组3个按钮，然后是两个。前三个需要独立。即我可以选择其中一个，两个或三个。第二组两个按要求工作，如果选择一个，则另一个不工作。

前三个功能不起作用，我不知道为什么。它们位于具有不同ID的单独按钮组中

有什么想法吗？这是代码：

<div class="row" style="margin-top: -4px;">
<div class="col-xs-9" style="padding-right: 0px;">
    <div class="col-xs-4" style="padding: 0px;">
        <div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Open now</button>
              </div>
        </div>
    </div>
    <div class="col-xs-4" style="padding: 0px;">
        <div id="freeOnlyBtn" class="btn-group btn-group-justified" role="group" aria-label="2">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Free only</button>
              </div>
        </div>
    </div>
    <div class="col-xs-4" style="padding: 0px;">
        <div id="18PlusBtn" class="btn-group btn-group-justified" role="group" aria-label="3">

              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">18+</button>
              </div>
         </div>      
    </div>
</div>
<div class="col-xs-3" style="padding-left: 0px;">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-info"><i class="fa fa-th" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-info"><i class="fa fa-list" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
      </div>
    </div>
</div>

Answer 1

您可以使用：check boxes表示多个，radio inputs表示单身。

<div class="container-fluid">
    <div class="col-xs-9">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="checkbox" autocomplete="off" checked>Open now</label>
            <label class="btn btn-primary">
                <input type="checkbox" autocomplete="off">Free only</label>
            <label class="btn btn-primary">
                <input type="checkbox" autocomplete="off">+18</label>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option2" autocomplete="off">On</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" autocomplete="off">Off</label>
        </div>
    </div>
</div>

Answer 2

怎么样，用一个复选框替换按钮上的显示文字：

自：

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Open now</button>
              </div>
        </div>

要：

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1"  data-toggle="buttons">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-primary">
        <input type="checkbox" autocomplete="off" checked>Display Text
    </button>
      </div>
</div>

为我工作！

Bootstrap Button组独立行动

2 个答案: