web-dev-qa-db-ger.com

Was ist die äquivalente .well-Klasse in Bootstrap 4?

In Bootstrap-3 gibt es die Klasse .well , die einen abgerundeten Rahmen um ein Element mit grauer Hintergrundfarbe und etwas Abstand hinzufügt.

<div class="well">Basic Well</div>

Ich habe jedoch keine .well-Klasse in bootstrap-4 gefunden. Gibt es einen Tag, der in Bootstrap-4 äquivalent zu .well ist?

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-4
72
Jobin

Update 2018 ...

card hat die well ersetzt.

Bootstrap 4

<div class="card card-body bg-light">
     Well
</div>

oder, als zwei DIVs ...

<div class="card bg-light">
    <div class="card-body">
        ...
    </div>
</div>

(Hinweis: In Bootstrap 4 Alpha wurden diese als card-block anstelle von card-body und bg-faded anstelle von bg-light bezeichnet.)

http://codeply.com/go/rW2d0qxx08

118
Zim

Wells werden mit der Version 4 von Bootstrap gelöscht.

Sie können Cards anstelle von Wells verwenden.

Hier ein kurzes Beispiel für die Verwendung der neuen Kartenfunktion:

<div class="card card-inverse" style="background-color: #333; border-color: #333;">
  <div class="card-block">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">This text will be written on a grey background inside a Card.</p>
    <a href="#" class="btn btn-primary">This is a Button</a>
  </div>
</div>

Live-Beispiel: jsFiddle

29
Emre Bolat

Das hat für mich am besten funktioniert:

<div class="card bg-light p-3">
 <p class="mb-0">Some text here</p>
</div>
11
Raef Akehurst

Keine der Antworten schien mit Knöpfen gut zu funktionieren. Bootstrap v4.1.1

<div class="card bg-light">
    <div class="card-body">
        <button type="submit" class="btn btn-primary">
            Save
        </button>
        <a href="/" class="btn btn-secondary">
            Cancel
        </a>
    </div>
</div>
3
Shoe

Ich mache meine Klassen gut für den Klassenalarm, für mich sieht es so aus, als würde es Nizza werden, aber manchmal sind einige Verbesserungen nötig, um die Breite auf 100% zu setzen.

<div class="alert alert-light" style="width:100%;">
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
0
krekto

Karte scheint "verworfen" zu sein LOL, ich fand das "gut", das nicht mit bootstrap 4.3.1 und jQuery v3.4.1 arbeitet, gerade gut mit bootstrap 4.3.1 und jQuery v3.3.1. Ich hoffe es hilft.

0
DrOne