引导形式 - 内联样式不触及

Question

我有以下HTML：

<form class="form-inline" role="form">
            <div class="form-group">
                <input class="form-control" type="text" placeholder="Your comments" />
            </div>
            <div class="form-group">
                <button class="btn btn-default">Add</button>
            </div>
</form>

我面临的问题是这两个元素并没有占据整行（它们没有触及）。见这里：

为什么会这样？

这是一个小问题展示问题：https://jsfiddle.net/nirchernia/pyfetd4p/

Answer 1

有几件事：

• form-group显示：block。
• 将输入和按钮标记放在同一个表单组
中
• 表单控件也是一个display：block。使用CSS强制它显示：inline-block并缩短宽度（它是100％）。

jsfiddle：https://jsfiddle.net/b6x12fc8/

<div class="form-group">
    <input class="form-control" type="text" placeholder="Your comments" /> 
    <button class="btn btn-default">Add</button>
</div>

.form-inline .form-control { width:75%; display:inline-block;}

Answer 2

给出以下css。因为目前它将采用width:auto;因此，它将采用输入字段的默认宽度。

用按钮触摸它。给100%并给出填充，这将增加更多的宽度并重叠按钮。因此，删除填充但padding:0

.form-inline .form-control {
    padding: 0;
    width: 100%;
}

https://jsfiddle.net/pyfetd4p/1/

在小屏幕中并排使用以下css;

.form-inline {
    display: flex;
}

<强> Fiddle link