以引导形式获取文本以对齐

Question

如何让客户代码和名称像地址输入一样对齐？

是否有某种容器可以将原始文本放入？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" name="editForm" ng-submit="editForm.$valid && vm.save()" novalidate>
  <div class="form-group">
    <label class="col-md-2 control-label">Code</label>
    <div class="col-md-10">
      {{vm.customer.code}}
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Name</label>
    <div class="col-md-10">
      {{vm.customer.name}}
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label" for="address1">Address 1</label>
    <div class="col-md-10">
      <input class="form-control" id="address1" name="address1" type="text" maxlength="50" ng-model="vm.customer.address1" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label" for="address2">Address 2</label>
    <div class="col-md-10">
      <input class="form-control" id="address2" name="address2" type="text" maxlength="50" ng-model="vm.customer.address2" />
    </div>
  </div>
</form>

Answer 1

您正在调用变量，这些变量应在项目范围中定义

例如put

<script>
var vm = {
  customer = {
    code: 123
  }
}
</script>

在html之前的某个地方，或者只是在项目的单独.js文件中定义这些变量，并将其导入到.html模板中，例如：

<script src="mydata.js" />

我假设你使用了把手，所以你可能想要阅读他们的快速教程，这真的很有帮助。 http://handlebarsjs.com/

Answer 2

这是因为control-label类将text-align: right属性应用于文本。

有很多方法可以解决这个问题。我将列出一些：

1. 删除班级control-label，默认情况下会将所有文本驱动到左侧。看起来会一致。

2. 或者你可以离开control-label课程＆amp;使用您自己的样式表覆盖左侧的text-align属性。

3. 如果您对左对齐方法不感兴趣或认为两者之间的差距太大，那么最佳解决方案是稍微修改布局并删除control-label。 将标签分为1 + 1列而不是2。这就是它的样子。

  <div class="form-group">
    <div class="col-md-1"></div>
    <label class="col-md-1 control-label">Name</label>
    <div class="col-md-10">
      {{vm.customer.name}}
    </div>
  </div>

希望这有帮助

Answer 3

要回答我自己的问题，我发现我正在寻找的容器是一个带有form-control-static类的p。

这使得表单中的静态文本与标签和输入完全一致，就像我正在寻找的那样。