Hannes Weninger: Bootstrap Responsive Select

Hallo,

ich hab ein Problem mit dem Responsive design. Ich hab mein Beispiel mal auf JSFiddle gepostet:

Mein Beispiel

Wenn man den Browser schmäler macht, dann bleiben die select- options gleich groß und dadurch wird der rechte Container über den linken geschoben. Ich hab mich jetzt schon mit min-widht usw. gespielt aber leider ohne Erfolg.

Meine Frage wär jetzt wie ihr das machen würdet. Irgendwie müssten sich die select Elemente anpassen (bis zu einer gewissen minimalen Größe). bzw. bin ich auch nicht sicher, ob mans vielleict ohne Table hinbekommt, damit es dann felxibler in der Breite ist.

Bin dankbar für jeden Hinweis.

Beste Grüße, Hannes

  1. Hallo

    Ich sehe zwei grundsätzliche Probleme.

    ob mans vielleict ohne Table hinbekommt

    Da keine Tabellendaten vorhanden sind sind Tabellen mit dem table-Element sachlich falsch. Du willst offensichtlich eine Tabellendarstellung. Die wird aber nicht mittels des table-Elements erzeugt, sondern über die Gestaltung mittels CSS.

    Bootstrap

    Die Bootstrap-Struktur ist falsch. Du solltest noch mal nachlesen wie ein Bootstrap-Grundgerüst aufgebaut sein muss, damit es funktioniert.

    So hat das

    <br>                  
    

    br-Element nichts im Grundgerüst von Bootstrap verloren.

    Oder durch das Konstrukt

    <div class="col-md-9">
    ...
       <div class="col-md-1">
          <table class="table">
    

    stehen der Tabelle grade mal 1/12 von 1/9 der Fensterbreite zur Verfügung.

    Gruss

    MrMurphy

    1. Hallo

      stehen der Tabelle grade mal 1/12 von 1/9 der Fensterbreite zur Verfügung.

      Da habe ich mich vertan. Richtig muss es heißen

      ... stehen der Tabelle grade mal 1/12 von 9/12 der Fensterbreite zur Verfügung.

      Das ist natürlich trotzdem noch viel zu wenig.

      Gruss

      MrMurphy