others-how to solve twitter bootstrap dropdown button group not same height problem ?

Jan 25, 2021

Problem

When we use bootstrap to show a dropdown button group:

        <div class="span3">
                <div class="btn-group">
                    <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i>Test user</a>
                    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
                        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
                        <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="i"></i> Make admin</a></li>
                    </ul>
                </div>
        </div>

we get this :

The core error is : The dropdown button is not the same size or same height with the button beside it.

Environment

Twitter Bootstrap v2.3.2

Reason

There is a bug in this component of bootstrap.

Solution

We should add a space character in the middle of the buttons like this:


        <div class="span3">
                <div class="btn-group">
                    <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i>User</a>
                    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">&nbsp;<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
                        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
                        <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="i"></i> Make admin</a></li>
                    </ul>
                </div>
        </div>

The most important part is :

<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
&nbsp;
<span class="caret"></span></a><ul class="dropdown-menu">

Now it look like this:

It works!