Добавление href к одной кнопке в панели инструментов btn и поддержание выравнивания

Я хочу добавить href к кнопке "Контакты" в следующем коде. Если я закрою кнопку в привязном теге, кнопка перемещается вниз по сравнению с другой кнопкой (она сдвигает 8 пикселей вниз). Я смотрел консоль 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 и буду признателен за любую помощь. Благодаря

ОТВЕТЫ

Ответ 1

В 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 из привязки, потому что я предполагаю, что вы не хотите, чтобы он был как ссылкой, так и выпадающим меню.

Ответ 3

Сохраните свой код и просто оберните <p>, а не <div>:

<p class="text-center">
    <a href="office/" class="btn btn-success">Get Started...</a>
</p>