Inline-Formular in einer Zeile mit Beschriftungen über Eingabefelder
Ich Baue eine web-app mit angularjs und bootstrap 3 css - (ich habe sehr begrenzte Kenntnisse in css). Ich möchte ein inline-form mit 5 Eingabefeldern und labels positioniert werden, die auf der Oberseite von Ihnen. Ersten Feld muss mehr Platz einnehmen, als die anderen.
Ich habe eine plnkr mit meinem Versuch hier: http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview
Und hier ist das markup mit, was ich versucht habe:
HTML:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">
<div class="form-group col-md-4">
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
<input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
</div>
<div class="form-group col-md-4">
<label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
<input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
</div>
<div class="form-group col-md-3">
<label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
<select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
<div class="form-group col-md-4">
<label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
<input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
/>
</div>
<div class="form-group col-md-3">
<label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
<select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
<div class="row align-center">
<input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
</div>
</form>Dies ist, wie die aktuelle plnkr macht das markup:
- Beschreiben Sie die Probleme, die Sie...öffnete ich Ihre Plunker link und nicht sehen, keine offensichtlichen Probleme, die in der Folge
- Denken Sie daran, es gibt nur 12 Spalten in einer Zeile. Du bist mehr als das, was bewirkt, dass Sie für die Verwendung von 2 Zeilen.
- Ich bearbeitet meine Frage zum hinzufügen einer img, wie es aussieht. Ich möchte für alle Felder in einer Zeile.
- Was wäre die Vorgehensweise dann? So entfernen Sie Bilder, die neben den Etiketten zu halten, Anzahl der Spalten, die unter 12?
- Sie sind mit 4+4+3+4+3=18 Spalten. Begrenzen diese erstrecken sich über insgesamt maximal 12. Entscheiden, welche Sie machen können, kleiner.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hinzufügen mein Kommentar als eine Antwort, wie ich vermute, es kann die Lösung sein.
Bist du mit 4+4+3+4+3=18 Spalten. Begrenzen diese erstrecken sich über insgesamt maximal 12. Entscheiden, welche Sie machen können, kleiner.
Müssen Sie nur verwenden Sie das raster, wie vorgesehen, immer im Auge zu behalten, wird die Summe der Spalten muss 12. Also, in deinem Beispiel, könnten Sie so etwas wie dieses. Beachten Sie, wie ich auch gruppiert, die ähnliche Bereiche Ihre form durch Verrechnung der Spalten:
Nun einige minimale CSS für den Abstand und sicherzustellen, dass alle Elemente Verhalten sich gleich:
natürlich können Sie Stil auf werden. Sehen Sie die Ergebnis hier
Möchten Sie so etwas wie dieses:
http://plnkr.co/edit/jWZMxIZEoBGuzjHgIiFq?p=preview
Dies ist der code:
Können Sie versuchen, wickeln Sie Ihre Etiketten-und Eingänge innerhalb eines div und versuchen. Wie: