HTML Responsive Design mit Bootstrap

[Dsimon24]

Hallo zusammen,

ich versuche gerade mittels Bootstrap 4.5 ein responsives Design zu erstellen.
Folgendes Problem bringt mich gerade nicht voran. Vielleicht habt ihr ein
Tipp für mich, wie ich da am besten vorgehen kann?:

Siehe Screenshot.

Damit ich zwischen den beiden Bausteinen (die linksbündig sein sollten) jeweils
links, rechts und in der Mitte etwas Platz habe, habe ich weitere columns ein-
gebunden.

Wie kann ich das aber sauberer und vor allem so realisieren, dass bei einem
Handy die beiden Textbausteine einfach untereinander stehen? Spätestens
da kommt mir das Problem mit den weiteren, leeren Columns nämlich
zum Problem.

Habt ihr da eine Idee, wie ich es besser machen könnte?

VG,

 

[Thaddelino]

Hi,

Lässt sich das ggf über padding realisieren?

LG

 

[Yuuri]

Und warum willst du dort unbedingt eine Spalte unterbringen, die nur dem Abstand dient? Geh vom Table Layout weg!

Mach nen Container mit zwei Spalten und setz ein entsprechendes Padding.

 

[efcoyote]

Eigentlich ist es in der Dokumentation gut erklärt. Du verwendest col-md- und deine Aufteilung gilt also für alles ab Medium-Größe. Einfach zusätzlich ein paar col-Angaben machen und fertig. Und vorallem mal die Doku durchlesen und das Grid-System von Bootstrap verstehen.

Eventuell ist Column-Offset auch noch eine Option.

 

[tiwa86]

Am Besten auch direkt "Mobile first" denken. Also du fängst mit der mobilen Ansicht an.

Grundsätzlich nur 2columns einsetzen. Also col-xxx-6 verwenden. Der row (Zeile: umliegender Container) gibst du dann ein gleichmäßiges Padding, damit du den Innenrand/bereich schonmal etwas mehr Platz gibst. Mobil sind die Spalten dann eh untereinander

In der Desktopansichtl sind die Col dann nebeneinander, dann musst du das padding-right und -left wieder wegnehmen, Geht über @Media-queries oder die col-xxx Werte

(Geht auch noch komprimierter, aber das wäre jetzt für den Anfang zu schwer, denke ich)


Beispiel:

 

[Tourgott]

Der Ansatz ist vollkommen falsch. Man baut keine Spalten nur für den Abstand. Dafür verwendet man Offset.