Spaltenbereich bootstrap-Design buggy?

Hallo @all,

ich habe ein etwas groteskes Problem im bootstrap-Design von Thomas - es gelingt nicht, in einem dreispaltigen Spaltenbereich den Abstand zwischen den Spalten unter 30px zu drücken, erweiterbar ist der Spaltenabstand problemlos. Ich habe das mal in einem flex-Design gegengeprüft - dort kann ich die Spalten quasi mit einem Abstand von 0 "auf Kante" legen,

In der Grafik liegt über dem Spaltenbereich ein dreispaltiger Kalender aus dem Siquando-plugin. Die in den Spalten verwendeten Grafiken haben keinen Rahmen, der Spaltenabstand im client steht bei null.

Eventuell kann das ja Jemand mit diesem Design mal gegenchecken?

LG, Thomas

 

Ich weiß, die Frage hat bei Dir quasi keinen Zweck, aber: Ein Link sagt mehr als 1.000 Worte.

Oder wer soll sich jetzt XAMPP installieren und dies nun alles extra nachbauen / nachstellen ... ??

Hi Volker,

Du bist der personifizierte Datenkrake ! Die Testseite steht sogar öffentlich, bringt uns jetzt aber auch nicht wirklich weiter. Eventuell kannst Du auf Deiner Seite mal in einem Testordner einen dreispaltigen Spaltenbereich bauen, in jede Spalte einen Testabsatz setzen (muss jetzt keine ausgemessene Grafik sein, IMHO reicht ein Textabsatz in diesem Fall mit einem sichtbaren 1px-Rahmen) den Spaltenabstand auf Null setzen und nachschauen, ob dieser dem auch folgt? Den Zeitaufwand würde ich geschätzt mit 2 Minuten veranschlagen, xampp nicht notwendig.

Ansonsten schicke ich Dir per PN auch den Link zu, ist eh die domain von meiner besseren Hälfte ... ich seh das Problem aber eher in einer Dysfunktion im Design.

Danke und LG, Thomas 

So, nachdem ich von einer Woche Ferien zurück bin erlaube ich mir, wieder ins Forum-Geschehen einzugreifen... 

"Bootstrap" ist ja keine Erfindung von Thomas, sondern ein Framework/Grit-System, das allen kostenlos zur Verfügung steht.

Und Deine beschriebene Geschichte ist kein "buggy" und auch keine "Dysfunktion im Design", sondern lediglich eine Grundeinstellung von Bootstrap.

Die Crux bei Bootstrap ist ja nur, wie man W2D/Siquando dazu bringt, dass es "Bootstrap" versteht, also lediglich wie man dies einbauen kann... 

ABER zurück zu Deinem Problem:

In Bootstrap ist nun mal zwischen den einzelnen "Grids" ein linker und rechter Abstand von 15px vorgegeben.

1
2
3
4
5
6
7

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9
{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

Diesen Abstand kann man nun entweder abändern (nicht empfohlen!) oder (z.B. mittels eigener CSS) übersteuern.

Hallo Walter,

das habe ich von der Ursache her zunächst dann mal verstanden ... eventuell kann Thomas das ja mal optimieren. Aber dort wo Du schreibst "oder (z.B. mittels eigener CSS) übersteuern." gibt mein browser Folgendes aus "覆盖或例如通过其自己的CSS的装置 ...

Ahnst Du, wo mein Problem liegen könnte ?

LG, Thomas

Keine Ahnung wovon Du schreibst... 

Link...???

War ein Spass - CSS ist für mich halt Chinesisch ! So wie ich das bootstrap-Raster beim Nachlesen verstehe, sind die 15px an jeder Seite tatsächlich fest definiert.

Was würde passieren, wenn ich das bspw. fix im design auf 2px reduziere? Und wenn das gar zu grauenvoll wäre, könntest Du mich zumindest mal in eine Richtung schubsen bzgl. der Definition via CSS?

LG, Thomas

Wenn CSS für Dich schon Chinesisch ist, dann solltest Du die Finger davon lassen, denn um "Bootstrap" überhaupt zu verstehen müsstest Du schon Chinesische Dialekte sprechen...  

Aber zurück zur Frage:

Wenn Du dies auf 2px einstellen würdest, dann hätte die natürlich Auswirkungen auf das gesamte Design. Wenn Du dies aber nur für "Einzelfälle" anwenden möchtest, dann solltest Du dies z.B. durch spezielle Klassen übersteuern.

Hi nochmal,

wird für mich jetzt auch nicht wesentlich verständlicher ... prinzipiell will ich das tatsächlich (zumindest momentan) nur für die Spaltenbereiche. Ich überschaue aber die Auswirkungen für die Responsivität des designs nicht wirklich ... sollte das keine gravierenden Folgen haben - wäre es Dir möglich, mir den css-code dafür zu erstellen? Preisgestaltung und Link könnten wir via PN diskutieren, dieses Jahr ist eh nicht meine Homepage dran und mein Taschengeld würde es nicht belasten .

LG, Thomas

Hallo Thomas,

Walter hat das Ganze schon recht gut erläutert (danke dafür). Der Spaltenabstand kann momentan nicht geändert werden, da dort auf das Grid-System von Bootstrap zurückgegriffen wird, und Standardabstand der einzelnen Elemente nach rechts und links ist jeweils 15px, was dann die voreingestellte Spaltenbreite von 30px ergibt.

Hi Thomas,

mittlerweile habe ich mir das angelesen ... ist eigentlich schade, weil einige Designoptionen dadurch flach fallen. Vermutlich ist dies auch der Grund dafür dass, wenn man das design im boxed-layout verwendet, die Navigation an den Seiten breiter ist als der content der Seite?

LG, Thomas

Wenn das der Fall ist hast du wohl schon etwas zu viel in den Layout Dateien herumgespielt, ein Link zur Seite wäre hilfreich. Hier ein Beispiel des Boxed Layout.

Ich spiele heute nicht mehr ... Spieltag ist bei mir immer Samstag . Prinzipiell sieht das bei mir genauso aus ... mit dem Unterschied, dass ich den Hintergrund der website und den Hintergrund des content-Bereiches weiss haben will. Dann sieht das schon ein klein wenig aus wie gewollt und nicht gekonnt, weil Du die Absätze nicht schlüssig zur Navigation bekommst - das ist in Deiner Demo ja idem. Und ohne dass ich das jetzt gemessen habe ... werden schon 15px sein. Ich habe das im obigen post nicht richtig beschrieben ...

LG, Thomas 

Das ist dann aber schon ein gaaaaannnnnz besonderer Fall, bei welchem dann in meiner Demo die Menüpunkte an der linken Kante "backen" würde.

Probier es bitte einmal hiermit:

1
2
3
4

#navbar .container {
	padding-left: 0;
	padding-right: 0;
}

Jupp, aber was wäre die Welt ohne die gaaanz besonderen Fälle? Ostfriesland hätte nicht einmal eine eigene Flagge (weisser Aal auf weissem Grund)!

Ich bin noch ein wenig am Experimentieren und lass das erstmal so ... man kann Krücken ja auch zum Laufen nutzen.

Danke trotzdem und LG, Thomas