引导表单内联样式不接触

Answer 1

有几件事：

• form-group是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;
}

小提琴链接