Html twitter bootstrap 3 input-group-addon 与 btn-group 的大小不一样

twitter bootstrap 3 input-group-addon with btn-group not the same size

提问by jorrin

I have to make an input-group-btn in twitter bootstrap with a dropdown-menu attached to it but the output image below shows that the btn-group is not of the same size with the input group.

我必须在 twitter bootstrap 中创建一个 input-group-btn 并附加一个下拉菜单，但下面的输出图像显示 btn-group 与输入组的大小不同。

Here is the html code:

这是html代码：

<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
     <div class="form-group">
        <div class="input-group">
        <div class="input-group-btn" >
            <div class="btn-group"> 
                <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                    <span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
                </button> 
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </div>
        </div>  
        <input type="search" name="searchBy" id="searchBy" class="form-control" />
        <span class="input-group-btn">
            <button id="filter" class="btn  btn-primary btn-block glyphicon glyphicon-plus" onclick="searchStationTable();"></button>
        </span>
        </div>
     </div>
</div>

回答by rails_id

Your problems are :

你的问题是：

1. The button of dropdown-menu you have btn-smclass, it will decrease size of button http://getbootstrap.com/components/#btn-dropdowns-sizing

   solution : remove btn-smclass

2. You are using glyphicon on the button.

   solution : you can use span, itag or else on button if using glyphicon http://getbootstrap.com/components/#glyphicons-how-to-use

1. 你有btn-sm类的下拉菜单按钮，它会减小按钮的大小http://getbootstrap.com/components/#btn-dropdowns-sizing

   解决方案：删除btn-sm类

2. 您正在按钮上使用字形。

   解决方案：如果使用 glyphicon http://getbootstrap.com/components/#glyphicons-how-to-usespan，您可以i在按钮上使用、标记或其他

---

---

<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
     <div class="form-group">
        <div class="input-group">
        <div class="input-group-btn" >
            <div class="btn-group"> 
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                    <span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
                </button> 
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </div>
        </div>  
        <input type="search" name="searchBy" id="searchBy" class="form-control" />
        <span class="input-group-btn">
            <button id="filter" class="btn btn-primary btn-block" onclick="searchStationTable();">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
        </div>
     </div>
</div>
</div>

http://jsfiddle.net/1hm7thq5/

http://jsfiddle.net/1hm7thq5/