twitter-bootstrap - 在 bootstrap btn-group 中设置默认选项

Question

我在表单中使用 Bootstrap 的 btn-group，我想将一个选项标记为默认值。我正在添加“事件”类。但是，当我点击另一个按钮时，这个按钮也会变为事件状态(因此我有两个事件按钮)。

有没有一种简单的方法可以将选项设置为默认值而不会出现此问题？

        <div id="summarySize" class="btn-group col-md-4 col-md-offset-4 text-center" role="group" aria-label="Summary Size"">
            <button type="button" class="btn btn-default" name="inlineRadioOptions" id="inlineRadio1">Short</button>
            <button type="button" class="btn active btn-default" name="inlineRadioOptions" id="inlineRadio2">Medium</button>
            <button type="button" class="btn btn-default" name="inlineRadioOptions" id="inlineRadio3">Large</button>
        </div>

附加问题:当你只有一列(在智能手机上)时，你可以做什么来使这个 btn-group 居中？我尝试将“text-center”添加为一个类，但它一直在左侧。

Answer 1

Bootstrap 不会切换按钮组。您需要编写一些 jQuery。

$('#summarySize .btn').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

关于你的奖励问题——.text-center 似乎工作正常。

Demo