如何在Bootstrap单选按钮组中制作相同高度的标签和值

Question

我有以下Bootstrap单选按钮组，其中标签高度与值的高度不同。

＆＃13;

＆＃13;

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  

<div class="input-group input-group-lg">
    <span class="input-group-addon" id="addon-title">Type</span>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="eventType" value="one"> One
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="eventType" value="two"> Two
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="eventType" value="three"> Three
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="eventType" value="four"> Four
        </label>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何更改它以使标签和值的高度没有差距？

Answer 1

尝试使用.btn-lg类作为示例中的标签。

＆＃13;

＆＃13;

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  

<div class="input-group input-group-lg">
    <span class="input-group-addon" id="addon-title">Type</span>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary btn-lg active">
            <input type="radio" name="eventType" value="one"> One
        </label>
        <label class="btn btn-primary btn-lg">
            <input type="radio" name="eventType" value="two"> Two
        </label>
        <label class="btn btn-primary btn-lg">
            <input type="radio" name="eventType" value="three"> Three
        </label>
        <label class="btn btn-primary btn-lg">
            <input type="radio" name="eventType" value="four"> Four
        </label>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;