0

我希望标签在其输入框旁边右对齐（中间有一个空格）。但是，标签仍然是左对齐的。根据 Boostrap3 文档和这个问题，应该使用 form-horizo​​ntal 类，但结果仍然不正确。

下面的 django 模板代码确实以两列方式生成字段，但带有左对齐标签：

<form class="form-horizontal" role="form">
    <div class="form-group">

        <div class="col-md-3 col-md-offset-1 input-md">
            {{ form.code|bootstrap_horizontal }}
        </div>
        <div class="col-md-3 col-md-offset-2 input-md">
            {{ form.name|bootstrap_horizontal }}
        </div>
        <div class="col-md-3 col-md-offset-1 input-md">
            {{ form.company|bootstrap_horizontal }}
        </div>

    </div>

    <div class="btn-group btn-group-lg">
        <button class="btn" type="submit">Crear Marca</button>
    </div>
</form>

我想我错过了一些东西。在此先感谢您的帮助。

编辑：在jsfiddle中输出 HTML 。此链接
中也包含实际输出的图像。如您所见，Code & Company 是左对齐的。

4

1 回答 1

2

我认为您的文本是右对齐的，但由于网格类的嵌套，效果不可见。

尝试类似：

<form class="form-horizontal container" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-sm-2 control-label">Code</label>
    <div class="col-sm-4">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>

    <label for="inputPassword1" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-4">
      <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
    </div>
  </div>
    <div class="form-group">
    <label for="inputEmail1" class="col-sm-2 control-label">Company</label>
    <div class="col-sm-4">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="btn-group btn-group-lg">
        <button class="btn" type="submit">Crear Marca</button>
  </div>
</form>

当你嵌套你的网格类（col- ）时，一个子级会获得其父级宽度的百分比。当您将 col-lg-6 嵌套在 col-lg-6 中时，它将是视口的 25% 50% 的 50%。

如果您想在左侧输入一个浮点数（您的 col- -类添加此浮点数），它们不能在不同的输入组中。有.from-group一个 clearfix 可以撤消左侧的浮动。所以尝试类似：

<div class="col-sm-6">
    <div class="form-group">
    <label for="inputEmail1" class="col-sm-4 control-label">Company</label>
    <div class="col-sm-8">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
    </div>
</div>      
<div class="col-sm-6">
    <div class="form-group">
    <label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
    <div class="col-sm-8">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
    </div>
</div>
于 2013-09-25T20:07:34.760 回答