{"id":764,"date":"2020-03-10T13:27:07","date_gmt":"2020-03-10T12:27:07","guid":{"rendered":"https:\/\/ekiwi.de\/?p=764"},"modified":"2020-11-07T19:49:01","modified_gmt":"2020-11-07T18:49:01","slug":"zeilenabstand-in-bootstrap-formularen-verringern","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/764\/zeilenabstand-in-bootstrap-formularen-verringern\/","title":{"rendered":"Zeilenabstand in Bootstrap-Formularen verringern"},"content":{"rendered":"<p>Erstellt man mit Bootstrap 4 ein <a title=\"Online Form Builder\" href=\"https:\/\/da-software.net\/en\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Formular<\/a>, werden recht gro\u00dfz\u00fcgige Abst\u00e4nde zwischen den Zeilen des Formulars eingef\u00fcgt.<\/p>\n<p><!--more--><\/p>\n<p>Der Standardabstand:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-765\" src=\"\/wp-content\/uploads\/2020\/03\/abstand_1.png\" alt=\"\" width=\"505\" height=\"750\" srcset=\"\/wp-content\/uploads\/2020\/03\/abstand_1.png 505w, \/wp-content\/uploads\/2020\/03\/abstand_1-202x300.png 202w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/p>\n<p>Ein Blick in den Webinspektor verr\u00e4t, dass es sich hier bei der Gruppe um eine &#8222;form-group&#8220; handelt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-766\" src=\"\/wp-content\/uploads\/2020\/03\/abstand_2.png\" alt=\"\" width=\"462\" height=\"159\" srcset=\"\/wp-content\/uploads\/2020\/03\/abstand_2.png 462w, \/wp-content\/uploads\/2020\/03\/abstand_2-300x103.png 300w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/p>\n<p>In dieser wird der Abstand mittels CSS realisiert.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-767\" src=\"\/wp-content\/uploads\/2020\/03\/abstand_3.png\" alt=\"\" width=\"220\" height=\"63\" \/><\/p>\n<p>Diesen k\u00f6nnen wir nun auf 0 setzen, andere Ma\u00dfeinheiten sind nat\u00fcrlich auch m\u00f6glich.<\/p>\n<pre>.form-group {\r\n\tmargin-bottom: 0rem !important;\r\n}\r\n<\/pre>\n<p>Dies verringert den Abstand bereits etwas, wie das Beispiel zeigt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-768\" src=\"\/wp-content\/uploads\/2020\/03\/abstand_4.png\" alt=\"\" width=\"900\" height=\"287\" srcset=\"\/wp-content\/uploads\/2020\/03\/abstand_4.png 900w, \/wp-content\/uploads\/2020\/03\/abstand_4-300x96.png 300w, \/wp-content\/uploads\/2020\/03\/abstand_4-768x245.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>Wer den Abstand weiter verringern m\u00f6chte, kann dies mit negativen Werten erreichen.<\/p>\n<pre>.form-group {\r\n\tmargin-bottom: -20px !important;\r\n}\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-769\" src=\"\/wp-content\/uploads\/2020\/03\/abstand_5.png\" alt=\"\" width=\"467\" height=\"219\" srcset=\"\/wp-content\/uploads\/2020\/03\/abstand_5.png 467w, \/wp-content\/uploads\/2020\/03\/abstand_5-300x141.png 300w\" sizes=\"auto, (max-width: 467px) 100vw, 467px\" \/><\/p>\n<h2>Vorlage in DA-FormMaker einbinden<\/h2>\n<p>Mit der Software <a href=\"https:\/\/da-software.net\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">DA-FormMaker<\/a> erstellen Sie leicht Bootstrap-Formulare, auch hier kann die \u00c4nderung schnell in den erweiterten Einstellungen vorgenommen werden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-770\" src=\"\/wp-content\/uploads\/2020\/03\/abstand_6.png\" alt=\"\" width=\"798\" height=\"301\" srcset=\"\/wp-content\/uploads\/2020\/03\/abstand_6.png 798w, \/wp-content\/uploads\/2020\/03\/abstand_6-300x113.png 300w, \/wp-content\/uploads\/2020\/03\/abstand_6-768x290.png 768w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/p>\n<p>Hier k\u00f6nnen wir nun den folgenden Code in den Head-Bereich einf\u00fcgen:<\/p>\n<pre>&lt;style type=\"text\/css\"&gt;\r\n.form-group {\r\n    margin-bottom: -20px !important;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-771\" src=\"\/wp-content\/uploads\/2020\/03\/abstand_7.png\" alt=\"\" width=\"782\" height=\"555\" srcset=\"\/wp-content\/uploads\/2020\/03\/abstand_7.png 782w, \/wp-content\/uploads\/2020\/03\/abstand_7-300x213.png 300w, \/wp-content\/uploads\/2020\/03\/abstand_7-768x545.png 768w, \/wp-content\/uploads\/2020\/03\/abstand_7-90x65.png 90w\" sizes=\"auto, (max-width: 782px) 100vw, 782px\" \/><\/p>\n<p>Fertig! Diese Einstellung wird nun bei jedem Export ber\u00fccksichtigt.<\/p>","protected":false},"excerpt":{"rendered":"<p>Erstellt man mit Bootstrap 4 ein Formular, werden recht gro\u00dfz\u00fcgige Abst\u00e4nde zwischen den Zeilen des Formulars eingef\u00fcgt.<\/p>\n","protected":false},"author":1,"featured_media":91,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[43,22],"class_list":["post-764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-bootstrap","tag-css"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=764"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/764\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/91"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}