Question

我正在尝试使用文本框创建一个流畅的单行表单，每个文本框的顶部都有相应的标签。就像一个带有标题和只有一个数据行的表，大致像这样（但希望更漂亮......）： http://jsfiddle.net/52VtD/5553/

表单最好是流畅的，以便文本框根据需要调整大小（但标签应始终保持在各自文本框的顶部）。

这是一次不成功的尝试： http://jsfiddle.net/fJ7Hb/3/

<form class="form-horizontal">
    <div class="row">
        <label class="col-sm-1">Item #</label>
        <div class="col-sm-2"><input type="text" class="form-control" /></div>
        <label class="col-sm-1">Description</label>
        <div class="col-sm-2"><input type="text" class="form-control" /></div>
        <label class="col-sm-1">Qty</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
        <label class="col-sm-1">Price</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
        <label class="col-sm-1">Total</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
</form>

帮助将不胜感激。

Answer 1

您可以将每个列包装在div标签中，然后使用一些css元素来设置显示以及每个项目的位置。

这是小提琴：http://jsfiddle.net/fJ7Hb/6/

HTML

<div class="row">
    <div>
        <label class="col-sm-1">Item #</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
    <div>
        <label class="col-sm-1">Description</label>
        <div class="col-sm-2"><input type="text" class="form-control" /></div>
    </div>
    <div>
        <label class="col-sm-1">Qty</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
    <div>
        <label class="col-sm-1">Price</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
    <div>
        <label class="col-sm-1">Total</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
    </div>
</div>

CSS

.row {
    width: 1100px;
}

.row > div {
    display: inline-block;
}

水平形式与bootstrap 3

1 个答案:

HTML

CSS