15

次のコードの[ContactSales]ボタンに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 に答える