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

[ebody]

Hallo,

ich habe eine Searchbar mit einem Button und einer Checkbox als Button dargestellt. Die beiden Elemente sollen immer in einer Zeile stehen bleiben mit genügend Abstand zueinander. Sie sind in einer Zeile in 2 Spalten aufgeteilt.

Bewegt sich die Displaygröße Richtung Smartphone Breite, brechen die beiden Spalten um.

So wirklich verstehe ich das aber nicht, da die Button Spalte eine feste Spaltenzahl zugeordnet bekommt und die Input Spalte die Spalten automatisch berechnet.

Ich habe aber auch schon probiert beiden Spalten eine für verschiedene Breakpoints jeweils fest zugeordnete Spaltenanzahl zu geben. Das hat aber auch nichts gebracht.

Sieht jemand den Fehler, warum die Elemente umbrechen?

Gruß ebody

[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">

Jetzt bricht es nicht mehr um und auch der Abstand zwischen Button und Input bleibt jetzt gleich.

<div class="container" id="data-feed-container">
  <div class="container m-3" id="searchbar">
    <div class="row align-items-center">
      <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>
    </div>
  </div>
</div>

#data-feed-container{
  border: solid 1px #337ab7
}

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

#searchbar input[type="search"]{
/*   width: auto; */
}

#searchbar{
  width: auto;
  padding: 25px;
}

Gruß ebody

[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

[ebody]

Hallo Gunnar,

danke für die Anmerkungen, die muss ich nochmal in Ruhe nachvollziehen. Kurz zu deiner Frage:

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

Dieser Button dient später dazu einen Filter für die Suche zu de/aktivieren. Ich muss also mit JS den Status kennen, ob der Button aktiviert ist oder nicht. Das ganze wird eine React Komponente.

Gruß ebody