Question

我试图在一个小容器（.col-sm-4）中创建一个内联表单。使用此大小的默认内联表单会自动换行到多行，我想避免使用。我的目标是： Desired Layout

此时我已经获得输入以抛出他们的最小宽度而是坚持他们的边界列，但我无法在我想要的位置获得按钮（并使用总体容器进行自动调整）。

HTML：

<div class="col-xs-4 well">
    <div class="col-xs-7 form-col" id="input-dynamic">
        <input type="text"></input>
    </div>
    <div class="col-xs-4 form-col" id="input-dynamic">
        <div class="input-group-addon">$</div>
        <input type="number"></input>
    </div>
    <div class="col-xs-1 form-col" id="input-dynamic">
        <button class="btn btn-danger">-</button>
    </div>
</div>

CSS：

#input-dynamic input[type=text] {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
}
#input-dynamic input[type=number] {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
}
#input-dynamic button {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
}
.form-col {
    padding-right: 2px;
    padding-left: 2px;
}

Answer 1

我分叉你的JSFiddle。

我实施了内联表单技术discussed here。

使用此Bootstrap form builder构建了一些元素。如果您使用谷歌Bootstrap表单构建器，您将看到许多类似的。

我还注意到你没有将所有外部资源添加到JSFiddle中，所以我也这样做了。

如果你有一个非常小的屏幕，那么它就会被碾压，但你可以使用媒体查询 HERE 来改变小宽度的布局。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">
            <form class="form-inline">
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6">
                            <input id="textinput" name="textinput" type="text" class="form-control input-md"></div>
                            <div class="col-xs-6"><div class="input-group"> <span class="input-group-addon">$</span>

                                <input id="prependedtext" name="prependedtext" class="form-control" placeholder="Amount" type="text"> <span class="input-group-btn">
        <button class="btn btn-danger" type="button">-</button>
      </span>

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

Answer 2

Kfriede ，你好。您说您希望避免表单项堆叠。
这是一个 Fiddle ，可以为表单执行此操作但仅仅因为它仍然可以在非常小的屏幕上正确使用我在320px处添加了一个介质断点，将按钮向下放下并展开两个输入，每个输入占据50％的宽度。
希望这可以帮助您从这里开始使用此表单。

<form class="row-fluid">

        <input type="text" class="input-style col-xxs-6 col-xs-4 " id="exampleInputName2" placeholder="Name">  
        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>

        <div class="col-xxs-6 col-xs-5 input-block">
            <div class="input-addon input-height col-xs-2">$</div>
            <input type="text" class="input-style col-xs-8" id="exampleInputAmount" placeholder="Amount">
        </div>

        <div class=" col-xxs-12 col-xs-3">  
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
</form>

inline form

Bootstrap 3使用小列自动调整内联输入

2 个答案: