Button abstand Twitter Bootstrap grid

[Hannes Weninger]

Hallo,

ich verwende Botstrap und habe folgendes HTML:

<div class="row clearfix">
	<div class="col-md-5">
		<div class="calendarRangeType calendarRange btn-group" role="group" aria-label="RangeType">
		  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-exclamation-sign"></span> <translate>SCHEDULER.CURRENT</translate></button>
		  <button type="button" class="btn btn-default" data-toggle="button" ><span class="glyphicon glyphicon-ban-circle"></span> Sperren</button>
		  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-print"></span> Drucken</button>
		  <span class="buttonDivider"></span>
		  <button type="button" class="btn btn-default chartbutton" ><translate>SCHEDULER.CHARTVIEW</translate></button>
		  <button type="button" class="btn btn-primary"><translate>SCHEDULER.TABLEVIEW</translate></button>
		</div>
	</div>

Mittels

<span class="buttonDivider"></span>

wollte ich einen Abstandgenerieren, was mir leider nicht gelungen ist mit dem css:

.buttonDivider {
	width: 10px !important;
	margin-left: 10px;
}

weiß jemand wie ich das am Einfachsten machen kann, dass ich zwischen den ersten drei und den letzten 2 buttons einen Abstand bekomme? Ein neues col will ich nicht machen, da die Buttons zusammengehören und beim verkleinern der Browserweite auch so sein sollte.

Danke! Hannes

[Matthias Apsel]

Hallo Hannes Weninger,

Mittels

<span class="buttonDivider"></span>

wollte ich einen Abstandgenerieren, was mir leider nicht gelungen ist mit dem css:

.buttonDivider {
	width: 10px !important;
	margin-left: 10px;
}

Breitenaangaben gibts für Elemente mit display: inline nicht.

Bis demnächst
Matthias

[MudGuard]

Hi,

Breitenaangaben gibts für Elemente mit display: inline nicht.

außer für replaced inline-Elemente (wie input, button, img, ...)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Hannes Weninger

Mittels

<span class="buttonDivider"></span>

Präsentationsbezogenes Markup. :-(

wollte ich einen Abstandgenerieren, was mir leider nicht gelungen ist mit dem css:

.buttonDivider {
	width: 10px !important;
	margin-left: 10px;
}

Auf nicht-ersetzte Inline-Elemente wirkt eine width-Angabe nicht (auf Elemente mit display: inline-block schon). margin-left wirkt aber und sollte zu sehen sein.

weiß jemand wie ich das am Einfachsten machen kann, dass ich zwischen den ersten drei und den letzten 2 buttons einen Abstand bekomme?

Den 3. Button selektieren und ihm margin-right verpassen oder den 4. Button selektieren und ihm margin-left verpassen. Kein span-Element.

Haben deine Buttons keine ID, anhand derer sie selektierbar sind? Sollten sie aber.

LLAP 🖖

[Tabellenkalk]

Hallo,

Den 3. Button selektieren und ihm margin-right verpassen oder den 4. Button selektieren und ihm margin-left verpassen. Kein span-Element.

und zwar so.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Den 3. Button selektieren und ihm margin-right verpassen oder den 4. Button selektieren und ihm margin-left verpassen. Kein span-Element.

und zwar so.

Nein, so nicht. Derselbe Grund wie hier: Der Abstand soll sicher zwischen zwei bestimmten Buttons (bzw. zwei Gruppen von Buttons) wegen ihrer Funktion sein, nicht wegen ihrer Ordinalzahl.

Wenn in der ersten Gruppe ein Button hinzukommt oder wegfällt, müsste man bei nth-child das Stylesheet anpassen. Das gilt es zu vermeiden.

LLAP 🖖

[dedlfix]

Tach!

Der Abstand soll sicher zwischen zwei bestimmten Buttons (bzw. zwei Gruppen von Buttons) wegen ihrer Funktion sein, nicht wegen ihrer Ordinalzahl.

Die Reihenfolge definiert sich aber nicht immer anhand der Funktion. Sollte man da nicht eher um Gruppen ein gruppierendes Element drumherumbauen?

Wenn in der ersten Gruppe ein Button hinzukommt oder wegfällt, müsste man bei nth-child das Stylesheet anpassen. Das gilt es zu vermeiden.

Und wenn der eine Button, der jetzt am Gruppenwechsel steht umsortiert werden soll, muss man den CSS-Selektor ändern. Oder hattest du dir das anders vorgestellt? Beispielsweise class="last_button_of_a_group" oder ähnliches?

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Und wenn der eine Button, der jetzt am Gruppenwechsel steht umsortiert werden soll, muss man den CSS-Selektor ändern.

Oops. Ja, auch das gilt es zu vermeiden.

Sollte man da nicht eher um Gruppen ein gruppierendes Element drumherumbauen?

Ja, wenn es eine (funktionale) Gruppierung der Buttons gibt – worauf der erwünschte Abstand hindeutet – dann sind gruppierende Elemente angebracht.

LLAP 🖖

[Tim Tepaße]

ich verwende Botstrap und habe folgendes HTML: <div class="calendarRangeType calendarRange btn-group" role="group" aria-label="RangeType">

Du nutzt doch schon Bootstraps Button Groups, die genau dafür da sind, zugehörige Buttons zusammen zu quetschen. Genau dort in der Bootstrap-Dokumentation ist auch ein Beispiel verschiedener Button Groups in einer Toolbar, bei der Du die zusammen gehörigen Buttons in eigene die Gruppe enthaltende Elemente sortierst. Wäre das nicht das, was Du willst?

<div class="btn-toolbar calendarRangeType calendarRange" role="toolbar" aria-label="RangeType">

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-exclamation-sign"></span>
      <translate>SCHEDULER.CURRENT</translate>
    </button>
    <button type="button" class="btn btn-default" data-toggle="button">
      <span class="glyphicon glyphicon-ban-circle"></span>
      Sperren
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-print"></span>
      Drucken
    </button>
  </div>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default chartbutton">
      <translate>SCHEDULER.CHARTVIEW</translate>
    </button>
    <button type="button" class="btn btn-primary">
      <translate>SCHEDULER.TABLEVIEW</translate>
    </button>
  </div>

</div>

Nebenbei:

<div ... aria-label="RangeType">

aria-label ist dafür gedacht, einen für Menschen lesbares Label an ein Element zu kleben. RangeType erscheint mir nicht sehr menschenfreundlich.

<span class="glyphicon glyphicon-exclamation-sign"></span>

Ich las gerade in der Bootstrap-Dokumentation quer, welche empfiehlt, für rein dekorative Glyphicons diese Screenreadern mit aria-hidden=true zu verstecken.

<translate>SCHEDULER.CURRENT</translate></button>

Reine Neugierde: Ist <translate> so ein Mechanismus wie gettext oder Internationalization Tag Set?

— Tim