Ich möchte UI wie in Link, die ich unten zur Verfügung gestellt habe machen. Wie ist es möglich, mit Bootstrap oder mit grundlegenden HTML-Tabelle? in zwei Reihen erstellt werdenBenutzeroberfläche Design mit Bootstrap
Dieses Layout kann - ein für die ersten 4 Elemente in der ersten Spalte des großen + Element und ein andere für den Rest 4 kleinen Elemente. Eine Zeile im Bootstrap ist im Grunde eine
Innerhalb der ersten Zeile muss es 2 Spalten mit unterschiedlicher Breite (in Prozent). Der erste könnte <div class="col-xs-3"> sein, während der zweite <div class="col-xs-9"> sein könnte.
[ANMERKUNG]: Die Summe der Zahlen in col-xs-3 und col-xs-9 soll gleich sein.
Das Gleiche gilt für die zweite Zeile. Es gibt 4 Elemente, so dass es leicht zu berechnen wäre:
12/4 = 3 - für jedes Element innerhalb dieser Zeile sollte ein <div class="col-xs-3"> verwendet werden.
Das resultierende HTML würde wie folgt aussehen:
<div>
<div class="row">
<div class="col-sm-3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="col-sm-9"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
</div>
Thx. Dieses Beispiel war brillant. Es hat mein Problem gelöst. – user2088073
10 @ user2088073, bitte akzeptieren Sie dies als die richtige Antwort, wenn es Ihnen wirklich geholfen hat. – thexpand
Sie können versuchen, wie dies zu tun:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
</div>
seine definitiv möglich. aber du musst es selbst ausprobieren. Wir reparieren den Code hier, schreiben sie nicht für Sie. – MrWitts
Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu programmieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie zusätzliche Recherchen anstellen, entweder über Google oder indem Sie SO suchen, einen Versuch unternehmen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –