1

こんにちは、フロントエンド開発者と、このテーマに興味を持っている他の皆さん。ブートストラップ コンポーネントの 1 つ、つまりnav nav-tabs nav-stackedクラスを使用したulリストのカスタマイズについて質問があります。

クラシックバリアントはこちら

<ul class="nav nav-tabs nav-stacked">
    <li><a href="lala">lala</a></li>
    <li><a href="baba">baba</a></li>
</ul>

次のようになります。

ここに画像の説明を入力

しかし、積み上げられたすべてのタブの右側にある種のリンク/ボタンを追加したい場合はどうすればよいでしょうか? liタグでタグを省略すると、クールなボーダー、who-tab-hover 効果がなくなります。これを行う方法はありますか?クラスnav nav-tabs nav-stackedのブートストラップ チェーンを引き続き使用して、タブに 2 番目の URL を配置できるようにすることができます (ある意味では、タブ全体が指定されたhrefにリンクされたままです) 、しかしクラスbtnの aなどの適切に配置された譜表

私はこのコードを試しました：

<ul class="nav nav-tabs nav-stacked">
    <li>
        <ul class="inline">
            <li><a href="lala">lala</a></li>
            <li class="pull-right"><a href="baba" class="btn btn-info">bbb</a></li>
        </ul>
    </li>
    <li><a href="baba">baba</a></li>
</ul>

つまり、はい、ハイパーリンクがあり、右に引っ張られたボタンがありましたが、その周りに境界線がなく、その中にすべてのアクティブゾーンがありませんでした.

不明な点がある場合は、より明確にします。セルゲイ

4

1 に答える 1

1

タブはアンカーを使用して作成されるため、右揃えのボタンをアンカー タグに配置できます。

<ul class="nav nav-tabs nav-stacked">
    <li><a href="lala">lala <button class="pull-right">bbb</button></a></li>
    <li><a href="baba">baba</a></li>
</ul>

デモ- http://bootply.com/60855

于 2013-05-07T14:31:55.830 に答える