web-dev-qa-db-ja.com

Bootstrap 4 Alpha 3で<a>のリンクスタイルを追加するにはどうすればよいですか？

コードは非常に単純です。

<a>This is a link</a>

Bootstrap 4 Alpha 2 demo では、リンクは青で表示されます。マウスをその上に置くと、濃い青で表示されます。

しかし、Bootstrap 4 Alpha 3 demo では、黒で表示されます。

特別なBootstrapクラスを追加して<a> Bootstrap 4 Alpha 3？

このようなもの？

<a class="bootstrap-link">This is a link</a>

クリーンでスマートな方法はありますか？

ありがとう

csstwitter-bootstraptwitter-bootstrap-4
5
Hongbo Miao

おそらく、href属性の存在に関して、2つのバージョン間で何かが変更されました。属性hrefをアンカー<a>に追加すると、正しく機能し始めます。

Hrefを使用した例のコード：

<a href>This is a link</a>

更新されたJSFiddle： https://jsfiddle.net/s1mvqok0/

6
Pedro Moreira

bootstrap 4cssが表示された場合

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

したがって、アンカータグにhref属性またはtabindex属性がない場合、アンカータグはその親要素の色を取得します。 1つのアプローチは、要素のtabindexを提供することです。

アンカータグに原色を適用する.text-primaryを使用する場合のクラスがあります。

.text-primary{
   color:#0275d8!important
}
a.text-primary:focus,a.text-primary:hover{
   color:#025aa5
}

jsfiddle

3
tmg