Bootstrap - wie mit Bootstrap Raster eine Reihe ohne Umbruch für schmale Displaygröße bauen?

[Gunnar Bittersmann]

@@ebody

Ich glaube, ich habe die Lösung. Ich musste dem Elternelement des Button nur eine feste Breite geben. <div class="col-sm-2 col-md-1 col-lg-1" style="text-align:center; width: 75px">

Wozu text-align:center? Wenn man einen Pakt mit dem Teufel (Bootstrap) schließt, muss man auch nach seinen Regeln spielen.

Der (Un)sinn von Bootstrap ist es, präsentationsbezogene Klassen zu verwenden. Zum Zentrieren von Text: text-center.

Mir scheint aber, du brauchst das gar nicht. Zentriert oder nicht – ich sehe da keinen Unterschied.

---

Zu deinem Bootstrap-Problem hast du aber noch HTML/CSS-Probleme:

      <div class="col-sm-2 col-md-1 col-lg-1" style="text-align:center; width: 75px">
        <input type="checkbox" id="btncheck" name="btncheck">
        <label class="btn btn-primary" for="btncheck"><i class="fas fa-arrow-alt-circle-right p-1"></i></label>
      </div>
      <div class="col">
        <input type="search" placeholder="Search..." class="form-control form-control-lg">
      </div>

Den Eingabefeldern fehlt die (zugängliche!) Beschriftung. Placeholder sind keine Label – wirklich nicht.

Du kannst daraus <input type="search" aria-label="Search" class="form-control form-control-lg"> machen, wenn du keine visuell sichtbare Beschriftung über oder neben dem Eingabefeld willst. Und evtl. durch ein Lupensymbol visualisieren, dass es sich um das Suchfeld handelt.

Vorausgesetzt, deine Seite ist auf englisch. Bei einer deutschen Seite müsste es aria-label="Suche" heißen.

Mit <label class="btn btn-primary" for="btncheck"> hast du zwar löblicherweise das label mit dem zugehörigen input verknüpft, darin befindet sich aber nur ein leeres i-Element, also kein hilfreicher Text. Dieser wäre auch mit aria-label hinzuzufügen oder (bevorzugt) in einem visuell versteckten Element untezubringen. Bootstrap hat dafür eine Helferklasse visually-hidden, die schon die nötigen Styles hat.

#searchbar input[type="checkbox"]{
  display: none;
}

Nein, das geht so nicht. display: none nimmt (wie auch visibility: hidden) das Element aus dem accessibility tree, d.h. es ist per Tastatur und assistiven Technologien gar nicht mehr zu bedienen. Da hilft es auch nicht, dass das Label sichtbar ist.

Interaktive Elemente dürfen nie mit display: none oder visibility: hidden versteckt werden, sondern nur visuell versteckt – wie oben angesprochen.

Aber wozu soll die Checkbox da überhaupt gut sein? Mir scheint, du willst da gar keine Checkbox, sondern einen Submit-Button?

😷 LLAP