Ich habe eine Reihe von Zeilen, die aus einer Schaltfläche und einem Text bestehen:
%Vor% Wenn ich die multicol -Klasse anwende, werden sie schließlich wie folgt umgebrochen:
Leider wird in vielen Fällen die Schaltfläche oder der Text in der nächsten Spalte halbiert. Durch die Verwendung von "display: inline-block" werden die Größe und Größe von Schaltflächen und Text bei unterschiedlichen Bildschirmauflösungen merklich voneinander getrennt.
Was ist der beste Weg, um zu verhindern, dass die [Button] [Text] -Kombination in der Spalte aufbricht, während jede [Button] [Text] -Kombination gleichmäßig verteilt bleibt und gleich aussieht?
Fügen Sie zuerst white-space: normal dem button hinzu, um den Standard nowrap aus der btn -Klasse des Bootstrap zu überschreiben.
Leider wird in vielen Fällen der Button oder der Text eingebrochen halb wenn man in die nächste Spalte geht. Mit "Anzeige: Inline-Block" macht meine Tasten und Text in der Größe auf dem anderen Bildschirm variieren Auflösungen und macht sie seltsam beabstandet.
Nun können Sie vermeiden das Brechen in die nächste Spalte mit:
%Vor%und macht sie seltsam beabstandet
Fügen Sie column-gap: 0 hinzu, um die Spaltenspalten default zu entfernen.
Sie können jetzt einige flexboxes hinzufügen, die zu Ihrem Fall passen - siehe Demo unten:
Tags und Links html css twitter-bootstrap twitter-bootstrap-3 flexbox