twitter-bootstrap-3 – 如何在文本框twitter bootstrap之后立即

发布时间：2020-12-17 21:28:26 所属栏目：安全来源：网络整理

导读：我有一个使用以下标记的表单元素..以及您可以在以下屏幕截图中找到的表单的当前外观：如何在相应的文本框后面设置“In”和“Lbs”？ div class="form-group" label for="BI16" class="col-md-1 col-md-offset-1 control-label"Height:/label div class="col

我有一个使用以下标记的表单元素..以及您可以在以下屏幕截图中找到的表单的当前外观：

Screenshot

如何在相应的文本框后面设置“In”和“Lbs”？

<div class="form-group">
    <label for="BI16" class="col-md-1 col-md-offset-1 control-label">Height:</label>
    <div class="col-md-1">
        <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />In
    </div>
    <label for="BI16" class="col-md-1 control-label">Weight:</label>
    <div class="col-md-1">
        <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
    </div>
    <label for="BI16" class="col-md-1 control-label">BMI:</label>
    <div class="col-md-2">
        <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />Lbs
    </div>
    <label for="BI16" class="col-md-1 control-label">Waist:</label>
    <div class="col-md-2">
        <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
    </div>
</div>

解决方法

您可以使用Bootstrap的 input groups将单元附加到输入：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <label for="BI16" class="col-md-1 col-md-offset-1 control-label">Height:</label>
  <div class="col-md-1">
    <div class="input-group">
      <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
      <span class="input-group-addon">In</span>
    </div>
  </div>
  <label for="BI16" class="col-md-1 control-label">Weight:</label>
  <div class="col-md-1">
    <div class="input-group">
      <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
      <span class="input-group-addon">Lbs</span>
    </div>
  </div>
  <label for="BI16" class="col-md-1 control-label">BMI:</label>
  <div class="col-md-2">
      <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
  </div>
  <label for="BI16" class="col-md-1 control-label">Waist:</label>
  <div class="col-md-2">
      <input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
  </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!