Bootstrap 3 .control-label 宽度？

Question

我在 bootstrap 3 中有这种形式（小提琴：http://jsfiddle.net/52VtD/2052/）

<div class="container-full">         
<form class="form-horizontal">
<fieldset>

<!-- Text input-->
<div class="form-group">
    <label class="control-label col-sm-4" for="name">Name</label>
    <div class="col-sm-8 col-md-4">
        <input id="name" value="Johnatan Dodsworth" />
    </div>
</div>
<!-- Text input-->
<div class="form-group">
    <label class="col-md-4 control-label" for="language">Based On</label>
    <div class="col-md-4">
        <select id="language">
            <option selected>English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Select Basic -->
<div class="form-group">
    <label class="col-md-4 control-label" for="language">Type</label>
    <div class="col-md-4">
        <select id="language">
            <option selected>English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Button -->
<div class="form-group">
    <div class="col-md-9">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary pull-right"> <span class="k-icon k-si-plus"></span> Add</button>
    </div>
</div>

</fieldset>
</form>
</div>

我认为.control-label 有问题，因为我的表单没有进入屏幕中间，而且我无法调整按钮以与最后一个选择输入对齐？ 或者只是在页面中间的表格，我试图改变 col-md 和一切！ .control-label 类的 witdh 是什么？ 有人有解决办法吗？

Answer 1

将“表单控件”添加到您的输入并选择..

http://bootply.com/108625

Answer 2

问题不在于 .control-label 的宽度，而是列的宽度，bootstrap 3 默认网格有 12 列，如果将 col-XX-6 分配给 .control-label 它会得到前 6 个colmuns（到屏幕中间），输入也发生了同样的事情。

您也可以在按钮容器上使用 text-align:center 使其居中。

See it on bootply

<div class="container-full">         
<form class="form-horizontal">
<fieldset>

<!-- Text input-->
<div class="form-group">
    <label class="control-label col-sm-6" for="name">Name</label>
    <div class="col-sm-6">
        <input id="name" value="Johnatan Dodsworth">
    </div>
</div>
<!-- Text input-->
<div class="form-group">
    <label class="col-sm-6 control-label" for="language">Based On</label>
    <div class="col-sm-6">
        <select id="language">
            <option selected="">English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Select Basic -->
<div class="form-group">
    <label class="col-sm-6 control-label" for="language">Type</label>
    <div class="col-sm-6">
        <select id="language">
            <option selected="">English</option>
            <option>German</option>
        </select>
    </div>
</div>

<!-- Button -->
<div class="form-group">
    <div class="col-sm-12 centered">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary "> <span class="k-icon k-si-plus"></span> Add</button>
    </div>
</div>

</fieldset>
</form>
</div>

`