css - html - 使用 Bootstrap 在 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

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

首先，您必须删除 .col-sm-1在你的 <label> ，因为此类会导致 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进行演示。

希望对您有所帮助!如果您有任何问题，请告诉我。