Wie stylt man einen Anker als button in Bootstrap-4?

Wenn ich eine Taste, sieht es wie folgt in der Bootstrap-4:

Wie stylt man einen Anker als button in Bootstrap-4?

<button type="button" class="btn btn-primary" target="_blank">Download</button>

Wenn ich den Anker benutzen, statt mit der Tasten-styling, sieht es wie folgt aus:

Wie stylt man einen Anker als button in Bootstrap-4?

<a type="button" class="btn btn-primary" target="_blank">Download</a>

Wie kann ich meinen Anker zu schauen, wie einem Flachbild-button?

  • Es gibt vordefinierte Stile für .btn im BS4. Also, um die gleiche Wirkung für die Anker-tag. Sie müssen, um es zu überschreiben manuell.
  • Sie brauchen nur zu sehen, die CSS von button im Dev-tools und aktualisieren Sie die CSS von a tag entsprechend.
InformationsquelleAutor Vadim Peretokin | 2017-08-07
  1. 5

    Entfernen Sie zuerst type="button" aus <a>. Sie müssen die Aktualisierung css und schreiben Sie benutzerdefinierte css für <a> tag.

    CSS:

    a.btn {border-radius: .25rem; border: 1px solid transparent; padding: .5rem 1rem; color: #fff; }
a.btn:hover { border-radius: .25rem; }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" target="_blank">Download</button>
<a class="btn btn-primary" target="_blank" href="#">Download</a>

    • Diese Antwort ist nicht mehr zutreffend. Keine benutzerdefinierten CSS sind erforderlich. Ich traf dieses Problem mit einem upgrade von BS3 BS4 zu und entfernen type="button" ist alles, was erforderlich war für das Anker-tag-match aus der original-code.
    • was über die Standard-button-Stil? es gibt keine btn-default mehr in BS4 und man kann nicht Stil eines Anker-Tags, die als Standard-Schaltfläche
    InformationsquelleAutor xaid
Schreibe einen Kommentar