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!
Bzw. hier: bootply.com/4f0XEvXKrI
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
- <!-- evtl. seperate Container? -->
- <div class="container-fluid">
- <!-- soll rechts erscheinen -->
- <div class="row">
- <div class="col-lg-5 pull-right">
- <h4 style="font-weight: bold">Status: <span class="label label-success">verfügbar</span></h4>
- <h4 style="font-weight: bold">Zustand: <span class="label label-success">gut</span></h4>
- </div>
- </div>
- <!-- ab hier alles links -->
- <div class="row">
- <div class="col-lg-5">
- <div class="input-group">
- <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">ID</span>
- <input class="form-control" value="12345678" aria-describedby="basic-addon1" style="padding-left: 10px;font-weight: bold" type="text">
- </div>
- </div>
- </div><!-- row -->
- <br>
- <div class="row">
- <div class="col-lg-5">
- <div class="input-group">
- <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">Gegenstand</span>
- <input class="form-control" value="Test" aria-describedby="basic-addon1" style="padding-left: 10px;font-weight: bold" type="text">
- </div>
- </div>
- </div><!-- row -->
- <br>
- <div class="row">
- <div class="col-lg-5">
- <div class="input-group">
- <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">Modell</span>
- <input class="form-control" value="1234" aria-describedby="basic-addon1" style="padding-left: 10px;font-weight: bold" type="text">
- </div>
- </div>
- </div><!-- row -->
- <br>
- <div class="row">
- <div class="col-lg-5">
- <div class="input-group">
- <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">Jahr</span>
- <input class="form-control" value="2016" aria-describedby="basic-addon1" style="padding-left: 10px;font-weight: bold" type="text">
- </div>
- </div>
- </div><!-- row -->
- <br>
- </div><!-- container -->
Bzw. hier: bootply.com/4f0XEvXKrI
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „GCAsk“ ()