CSS Bootstrap Website: input-group ist nicht zentriert

Pfandfinder · 19. Dezember 2020

ich habe hier mal meine Seite ganz grob zusammengestellt um das Problem zu zeigen. Alle Texte usw. sind mittig wie es sein soll. nur diese Art von "card" nicht. aber wieso ? ich bekomme es auch nicht mittig mit align: center und so.

HTML:

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div align="center" class="container animated fadeIn">
    <div class="row">
        <div class="col-md-12 col-md-offset-1 col-sm-12 box-shadow">

            <p>meine seite.</p>

            <div class="input-group mb-3">
                <span class="input-group-text">hier lang: </span><input type="text" class="form-control" style="max-width: 250px;" required><button class="btn btn-success" type="submit">Klick</button>
            </div>

        </div>
    </div>
</div>

Es muss irgendwie an der class input-group liegen...

Lawnmower · 20. Dezember 2020

Auf Webspace hochladen und Link reinstellen, dann kann man da besser helfen.

Bemme90 · 20. Dezember 2020

hier stand Mist

madmax2010 · 20. Dezember 2020

mach mal das mb-3 raus

Pfandfinder · 20. Dezember 2020

mb-3 raus bringt nix.

Hier: https://jsfiddle.net/L5waur76/

Lawnmower · 20. Dezember 2020

Ok und was ist nicht mittig jetzt? Der ganze Container?

Pfandfinder · 20. Dezember 2020

Das input samt grauen und grünen "buttons" ? das ist links bündig.

ven- · 20. Dezember 2020

Die Inhalte sind kleiner als der div. Da divs standardmäßig display: block haben nehmen sie automatisch die volle Breite ein.

Pack ein div mit Inline-block drumherum und es passt sich an.

HTML:

        <div class="d-inline-block">
            <div class="input-group mb-3">
                <span class="input-group-text">hier lang: </span><input type="text" class="form-control" style="max-width: 250px;" required><button class="btn btn-success" type="submit">Klick</button>
            </div>
        </div>

Nicht die eleganteste Lösung, aber zeigt dir möglicherweise die Ursache des Problems.

Lawnmower · 20. Dezember 2020

justify-content: center Style auf die input-group (da die display:flex hat) - dann passts - ohne extra Div.
Zum nachlesen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Suche

CSS Bootstrap Website: input-group ist nicht zentriert

Pfandfinder

Lieutenant

Lawnmower

Maître de cuisine

Bemme90

Lt. Junior Grade

madmax2010

Fleet Admiral

Pfandfinder

Lieutenant

Lawnmower

Maître de cuisine

Pfandfinder

Lieutenant

ven-

Cadet 4th Year

Lawnmower

Maître de cuisine

Ähnliche Themen