Button abstand Twitter Bootstrap grid

[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