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班的内容是什么？有人有解决方案吗？

Answer 1

问题不在于.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>

`

Answer 2

在输入中添加'form-control'并选择..

http://bootply.com/108625

Bootstrap 3 .control-label width？

2 个答案: