15

我想在下面的代码中为“联系销售”按钮添加一个 href。如果我将按钮包装在锚标记中，则按钮向下移动，与另一个按钮不对齐（它向下滑动 8px）。我一直在查看 Firebug 控制台，但不知道如何解决这个问题。 

         <div id="headerbtn" class="span6">
            <div class="btn-toolbar pull-right">
                <div class="btn-group">
                    <button class="btn btn-primary dropdown-toggle">
                        Contact Sales
                    </button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-user icon-white"></i>
                    Sign In
                    <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">Profile</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">Sign Out</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

我是 Bootstrap 的新手，不胜感激。谢谢

4

3 回答 3

38

在 Bootstrap 中，具有“btn”类的锚点的样式与按钮的样式相同。因此，您实际上可以将“联系销售”按钮更改为锚点，同时保留按钮样式。

未经测试（因为 jsFiddles 似乎没有引发您遇到的问题）：

     <div id="headerbtn" class="span6">
        <div class="btn-toolbar pull-right">
            <div class="btn-group">
                <a href="#" class="btn btn-primary">
                    Contact Sales
                </a>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                <i class="icon-user icon-white"></i>
                Sign In
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Profile</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Sign Out</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

我还dropdown-toggle从锚点中删除了该类，因为我猜您不希望它既是链接又是下拉切换。

于 2012-10-03T15:56:08.420 回答
2

你可以检查这个小提琴

它只是在锚标签中包装按钮..

于 2012-10-03T05:38:42.287 回答
1

保留您的代码，并使用<p>而不是包装<div>：

<p class="text-center">
    <a href="office/" class="btn btn-success">Get Started...</a>
</p>
于 2014-08-12T18:44:26.780 回答