问题描述:

I have some form controls that I'm using label tags with, but there are also 2 columns in the row that aren't input forms so label tags aren't working correctly - a static label field, and a save button.

The values are floating right next to the labels rather than underneath. What can I use as an alternative?

JSfiddle

<div class="list-group list-group-large list-group-background list-group-background-data settings">

<div class="list-group-header">

<div class="list-group-title">

<h3>Set Alerts</h3>

</div>

</div>

<div class="list-group list-group-large list-group-data">

<div class="row" ng-repeat="alarm in alarms">

<div class="col-md-3">

<label>Field</label>

<select ng-model=alarms[$index].name class="form-control">

<option ng-repeat="header in headers" value="{{header[0]}}">{{header[0]}}</option>

</select>

</div>

<div class="col-md-2">

<label>Condition</label>

<select class="form-control" ng-model=alarms[$index].variant class="selectpicker">

<option ng-selected="alarm.variant == 'gt'" value="gt">is greater than</option>

<option ng-selected="alarm.variant == 'lt'" value="lt">is less than</option>

</select>

</div>

<div class="col-md-2">

<label>Threshold</label>

<input ng-model=alarms[$index].threshold type="text" class="form-control threshold" value="{{alarm.threshold}}">

</div>

<div class="col-md-3">

<label>Units</label>

<span>deg</span>

</div>

<div class="col-md-2">

<label>Save</label>

<button type="button" ng-show="$last" ng-click="pushThreshold()" class="btn btn-success-outline">

<i class="fa fa-check"></i>Save</button>

</div>

</div>

</div>

</div>

网友答案:

I suggest You to use this code:

<div class="input-group">
     <span class="input-group-addon" id="contactField1" >Name</span>
     <input type="text" class="form-control" required="true" placeholder="write Name" aria-describedby="contactField1">
</div>

This will add a nice label with "Name" on the right side of input component

网友答案:

I changed the <span> tag to a <div> tag and wrapped the button inside a <div> tag and it worked.

相关阅读:
Top