logo标签列表

如何在Bootstrap单选按钮组中使标签和值具有相同的高度

twitter-bootstrap
3
我有一个Bootstrap单选按钮组，其中标签的高度与值不同。 

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
<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>

我该如何改变样式，使标签和数值的高度没有间隙？
1个回答
4

尝试在标签中使用类似于示例中的.btn-lg类。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
<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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接