Bootstrap-4 kleine Plakette neben großen Titel

Ich versuche, einen kleine Bootstrap (4) Abzeichen neben einem großen Titel. Was ich versucht habe:

<h1>Product <span class="badge badge-primary">Version 1</span></h1>

Bootstrap-4 kleine Plakette neben großen Titel

und

<h1>Product></h1>
<span class="badge badge-primary">Version 1</span

Bootstrap-4 kleine Plakette neben großen Titel

Was ich will:

Bootstrap-4 kleine Plakette neben großen Titel

Was ist der einfachste Weg, dies zu erreichen?

InformationsquelleAutor Thomas W | 2017-09-25



3 Replies
  1. 9

    Etwas wie

    <div>
      <h1 style="display: inline-block">Product</h1>
      <span class="badge badge-primary" style="vertical-align: top">Version 1</span>
    </div>

    könnte den trick tun.

    • Funktioniert perfekt.
  2. 9

    Ein sauberer Ansatz wäre, um die Bootstrap-4 utility-Klassen, die zur Verfügung gestellt wurden:

    <h2 class="h3 d-inline-block">Product</h2>
    <span class="badge badge-primary align-top">Version 1</span>

    Ausgabe

    Bootstrap-4 kleine Plakette neben großen Titel

    Lesestoff

    display

    vertical-align

    • Außer dieser kann Durcheinander mit anderen Elementen, layout, zum Beispiel, wenn Sie ein Bild über den h2-Titel
  3. 1

    Sollten Sie die erste version:

    <h1>Product <span class="badge badge-primary">Version 1</span></h1>

    Anwenden und die folgenden Stile auf .badge

    font-size: 10px;
    vertical-align: top;
    top: 10px; //depends on your font-size
    position: relative;

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.