Bootstrap zwei "Container" nebeneinander

  • HTML

Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von Link.

    Bootstrap zwei "Container" nebeneinander

    Guten Morgen,

    folgendes:

    Ich möchte eine Detailansicht realisieren.

    Hierfür sollen auf der linken Seite der Webseite diverse Textboxen mit Labels angezeigt werden und auf der rechten Seite sollen verschiedene Badges und BUttons angezeigt werden.

    Problem hierbei ist, dass ich es nicht wirklich schaffe, diese zwei Container zu trennen. Mehrere Versuche, aber alle erfolgslos. Habe es einfach mal in die .row class gepackt, dann geht es zwar, verkleinert man aber die Fensterbreite, so ist dann z.B. input text und darunter dann schon das Badge, darunter dann wieder input text, usw.

    Wird der Bildschirm aber verkleinert, will ich, dass alle input text untereinander stehen und darüber/darunter alle Badges und Buttons.

    Ich hoffe, es ist klar, was ich haben will.

    Eventuell kann mir jemand auf die Sprünge helfen, wie ich die zwei Sachen nebeneinander packen kann, sodass diese auch beim Verkleinern untereinander dargestellt werden und nicht durchmischt.

    /EDIT:
    In dem Code hier wird es zwar untereinander angezeigt, aber leider auch in der normalen Ansicht. WIll sie aber nebenainder parallel darstellen. SOwas wie float: left und float: right, was hier aber nicht geht.

    Danke im Voraus!

    HTML-Quellcode

    1. <!-- evtl. seperate Container? -->
    2. <div class="container-fluid">
    3. <!-- soll rechts erscheinen -->
    4. <div class="row">
    5. <div class="col-lg-5 pull-right">
    6. <h4 style="font-weight: bold">Status: <span class="label label-success">verfügbar</span></h4>
    7. <h4 style="font-weight: bold">Zustand: <span class="label label-success">gut</span></h4>
    8. </div>
    9. </div>
    10. <!-- ab hier alles links -->
    11. <div class="row">
    12. <div class="col-lg-5">
    13. <div class="input-group">
    14. <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">ID</span>
    15. <input class="form-control" value="12345678" aria-describedby="basic-addon1" style="padding-left: 10px;font-weight: bold" type="text">
    16. </div>
    17. </div>
    18. </div><!-- row -->
    19. <br>
    20. <div class="row">
    21. <div class="col-lg-5">
    22. <div class="input-group">
    23. <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">Gegenstand</span>
    24. <input class="form-control" value="Test" aria-describedby="basic-addon1" style="padding-left: 10px;font-weight: bold" type="text">
    25. </div>
    26. </div>
    27. </div><!-- row -->
    28. <br>
    29. <div class="row">
    30. <div class="col-lg-5">
    31. <div class="input-group">
    32. <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">Modell</span>
    33. <input class="form-control" value="1234" aria-describedby="basic-addon1" style="padding-left: 10px;font-weight: bold" type="text">
    34. </div>
    35. </div>
    36. </div><!-- row -->
    37. <br>
    38. <div class="row">
    39. <div class="col-lg-5">
    40. <div class="input-group">
    41. <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">Jahr</span>
    42. <input class="form-control" value="2016" aria-describedby="basic-addon1" style="padding-left: 10px;font-weight: bold" type="text">
    43. </div>
    44. </div>
    45. </div><!-- row -->
    46. <br>
    47. </div><!-- container -->


    Bzw. hier: bootply.com/4f0XEvXKrI

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „GCAsk“ ()

    Danke Dir. Funktioniert soweit sehr gut.

    Gibt es denn eine Möglichkeit, beim Minimieren zu sagen, dass die rechte Seite oberhalb erscheinen soll? AKtuell werden ja die Textboxen dann zuerst oben angezeigt, will das aber genau andersherum haben.

    Sprich, in der "normalen" Breite sollen links weiterhin die Textboxen erscheinen und rechts die Label, wenn man das Fenster aber verkleinert und die ganzen Sachen untereinander erscheinen, soll oberhalb die Informationen stehen.

    GEht das ohne weiteres? Ansonsten wäre das auch nicht so schlimm.

    Unabhängig vom Problem ein paar Verbesserungsvorschläge :)
    - nutze für deine input-group-addons doch labels mit entsprechenden for-Attribut
    - für Status/Zustand solltest du keine Überschriften (h4) verwenden
    - die style-Attribute solltest du rauswerfen und die Formatierung lieber über eine CSS-Klasse regeln
    - aria-describedby entweder richtig verwenden oder komplett weglassen
    - br rausschmeißen und per CSS regeln

    @GCAsk geht theoretisch schon, du könntest die Elemente dann für kleinere Bildschirme absolut oder fix positionieren und dann natürlich auch angeben, wo sie platziert werden. Hast halt dann ein Problem mit dem Container-Flow.
    Alternativ mit jQuery und .width() bzw. .height(). Wäre sogar sauberer, allerdings setzt es für optimale Darstellung immer aktiviertes JavaScript voraus.
    Ansonsten warte ab, Bootstrap 4 soll Unterstützung für Flexbox-Grid-Layout mitbringen -> v4-alpha.getbootstrap.com/getting-started/flexbox/

    Link :thumbup:
    Hello World

Facebook
Telefonspende