Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Split button dropdown doesn't render right in btn-toolbar

Created by: maxbane

Here's a minimal example of a split button dropdown next to some other buttons in a btn-toolbar:

<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../jquery/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<title>Hello</title>
</head>

<body>
    <div class="container">
    <h1>Hello</h2>

    <div class="btn-toolbar">
                <a href="#"
                    class="btn btn-info"><i class="icon-check icon-white"></i> Mark all read</a>
        <a href="#" class="btn btn-success">
            <i class="icon-eye-open icon-white"></i>
            Watch forum
        </a>

        <div class="btn-group">
            <a class="btn" href="#">RSS</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
               <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
               <li>
                   <a href="#">RSS</a>
               </li>
               <li>
                   <a href="#">SMTP</a>
               </li>
               <li>
                   <a href="#">NNTP</a>
               </li>
            </ul>
        </div>
            </div>
    </div>
</body>
</html>

Put that at the top level of an extracted bootstrap.zip (and adjust the path to your jquery). Here's what I see in firefox: http://i42.tinypic.com/2i2sqw.png

Looks the same in Chrome. Clicking the dropdown caret displays the menu as expected, so the javascript is apparently working.

Either this layout is a bug, or I must be doing something wrong. If it's the latter, the documentation should be changed to make it clear what's wrong (unless I've done something really wrong :)).