twitter-bootstrap Bootstrap 3 .control-label 宽度？

Bootstrap 3 .control-label width?

提问by Schneider

I have this kind of form in bootstrap 3 (fiddle: http://jsfiddle.net/52VtD/2052/)

我在引导程序 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>

I think i have problem with .control-labelbecause my form does not goes to the middle of the screen, and i can not adjut button to line in with last select input? Or just aligh form in the middle of the page, i have tried to change col-md and everything! What is witdh of .control-labelclass? Does anybody have solution?

我想我有问题，.control-label因为我的表单没有进入屏幕中间，而且我无法调整按钮以使用最后一个选择输入？或者只是在页面中间对齐表格，我已经尝试更改 col-md 和所有内容！什么是.control-label班级？有人有解决方案吗？

回答by Scrocchi

The problem isn't the width of .control-label, it's the width of the columns, the bootstrap 3 default grid has 12 columns, if you assign col-XX-6 to .control-label it gets the first 6 colmuns (to the middle of the screen), and the same thing happend with the inputs.

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

you can also use text-align:center on the button container to make it centered.

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

See it on bootply

在 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>

`

`

回答by Zim

Add 'form-control' to your input and selects..

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

http://bootply.com/108625

http://bootply.com/108625