bootstrap form-horizo​​ntal left align

Question

有人可以告诉我如何将用户名标签对齐到左边。

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-3" for="username">Username</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="username" placeholder="Enter username">
        </div>
    </div>
</form>

Answer 1

需要删除表单横向

<form >
    <div class="form-group">
        <label class="control-label col-sm-3"for="username">Username</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="username" placeholder="Enter username">
        </div>
    </div>
</form>

  

注意：如果你想要任何文字 - 左或右，那么使用text-left或   文本权限类，但没有这些类，你的代码将正常工作。

阅读本文档

http://getbootstrap.com/css/

您可以进一步使用 grid-framework.less 文件来查看它将管理行中的数据（以获得更多控制权）

Answer 2

你可以通过向它添加一个额外的类来将标签浮动到左边，然后通过CSS浮动它。

 <label class="control-label col-sm-3 label" for="username">Username</label>

.label { float: left; }

https://jsfiddle.net/p0pob33d/

Answer 3

从表单标记中删除“form-horizo​​ntal”类。它提供额外的右对齐

你的HTML应该是：

<form>
    <div class="form-group">
        <label class="control-label col-sm-3" for="username">Username</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="username" placeholder="Enter username">
        </div>
    </div>
</form>

参考：http://www.w3schools.com/bootstrap/bootstrap_forms.asp