Question

我需要我的2个输入，这些输入内联以具有定义col-md-6和col-md-3的父div的宽度。现在输入正确对齐，但宽度在一种情况下小于col-md-6，在第二种情况下大于col-md-3。如何使此输入相应地具有宽度col-md-6和col-md-3？

<div class="col-md-9">
    <form action="" role="form" class="form-inline">
        <div class="col-md-6">
            <div class="form-group">
                <label for="iR" class="sr-only">i R</label>
                <input type="text" class="form-control" id="iR" placeholder="some mid long explanation" />
            </div>
        </div>
<div class="col-md-3">
            <div class="form-group">
                <label for="iS" class="sr-only">i S</label>
                <input type="text" class="form-control" id="iS" placeholder="some mid long explanation 2" />
            </div>
        </div>
</div>

Answer 1

正如其他人所提到的，您需要使用内联表单指定自定义宽度。 From the docs：

输入和选择的宽度为：100％;默认情况下在Bootstrap中应用。在内联表单中，我们将其重置为width：auto;所以多个控件可以驻留在同一行上。根据您的布局，可能需要额外的自定义宽度。

在您的情况下，您需要为输入和表单组指定width: 100%：

<div class="form-group" style="width: 100%">

和

<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" style="width: 100%" />

Working example in JSFiddle

Answer 2

只需输入style =＆＃34; width：100％;＆＃34;在输入;顺便说一下，你错过了一个表格结束标签。

另外，如果你看一下bootstraps你所设置的任何元素，他们会留下一些余量。因此，如果您不想要任何边距，只需将边距更改为0。

如何使输入扩展到Bootstrap 3中的列宽？

2 个答案: