html - 在DIV中使用引导文本对齐

Question

嗨，我不是一个好的UI HTML开发者，但必须在窗体上做一些修复。我很惊讶，文本对齐不适用于这种形式。我可以看到这个HTML，但不知道如何在标签StockEnd上对齐文本。

<div class="col-sm-1"> 
    <label class="control-label col-sm-1" for="StockEnd">End</label> 
</div> 
<div class="col-sm-2 "> 
    <div class="input-group"> 
    <input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)"> 
    <span class="input-group-btn"> 
     <button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button> 
    </span> 
    </div> 
</div> 

Answer 1

要么添加text-right类父form-group

OR

修改标签是display: block与text-right类来做到这一点。

Answer 2

这可以通过对HTML类的边际调整来实现。

首先，你必须在你的<label>删除.col-sm-1，因为该类导致float:left被应用到元素，这意味着任何使用text-align将不再影响它。删除该类后，可以将.text-right添加到<label>的父级。

最后，你的HTML看起来像：

<div class="col-sm-1 text-right"> 
    <label class="control-label" for="StockEnd">End</label> 
</div> 
<div class="col-sm-2 "> 
    <div class="input-group"> 
    <input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize="" typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)"> 
    <span class="input-group-btn"> 
     <button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button> 
    </span> 
    </div> 
</div> 

这里有一个Bootply证明。

希望这会有所帮助！如果您有任何问题，请告诉我。

Answer 3

经与我的同事讨论后，我们进行了这项更改，并按要求运作。刚刚从外部Div删除班，它的工作。因此，而不是

<div class="col-sm-1"> 
    <label class="control-label col-sm-1" for="StockEnd">End</label> 
</div> 

现在

  <div > 
       <label class="control-label col-sm-1" for="StockEnd">End</label> 
      </div> 

休息一样没有变化。