Question

Bootstrap可以为<input type="radio"提供一个按钮外观（see here）但似乎只有将它们放入按钮组才能正常工作。

我将会有很多这样的东西让它们与页面很好地包装，我移除了他们的<div class="btn-group" data-toggle="buttons">容器，但这样看起来很糟糕：显示了单选按钮和按钮不要保持他们的切换外观。（see here）

您是否知道将无线电显示为按钮而无需将其作为按钮组显示的任何解决方法？

Answer 1

显然下面的标记可以解决问题。实际的诀窍是仍然用.btn包裹<div data-toggle="buttons">，但不在其上设置.btn-group类。 data-toggle="buttons"属性仍将提供功能，可视化表示将是单个按钮的视觉表示还可以使用具有更多无线电选项的fiddle。

<div data-toggle="buttons">
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    </label>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/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>

将Bootstrap无线电输入显示为按钮，但不显示为按钮组

1 个答案: