如何設置文本的文本框Twitter的引導之後

我必須使用下面的標記..你可以在下面的截圖發現窗體的當前外觀的表單元素：如何設置文本的文本框Twitter的引導之後

我怎樣才能在相應的文本框後面設置「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>

來源

2014-03-29 Ammar Khan

您可以使用引導程序的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>

來源

2014-03-29 16:58:45

如果你不想要這個造型，但希望它的OP如何表現？ –

「造型」你的意思是特定的HTML？ Bootstrap對於CSS選擇器非常具體，因此您無法更改HTML的結構。您需要匹配他們在文檔中顯示的內容。 –

不，HTML不會定義樣式。我指的是Bootstrap如何呈現插件，這是附帶邊框和背景的「盒子」。 YMMV，但這不是OP想要的。我想問的原因是因爲我也想要它（放棄並在最後輸入一個'display：inline'）。 –

如何設置文本的文本框Twitter的引導之後

回答

相關問題