如何将输入框旁边的按钮对齐？

Question

<div class="row">
    @Html.LabelFor(m => m.ClientVideoFilePath)
    <form>
        <div class="input-group">
            @Html.TextBoxFor(m => m.ClientVideoFilePath, new { @class = "form-control large-textbox" })
            <span class="input-group-btn">
                <button class="btn btn-default">Upload Video</button>
            </span>
        </div>
    </form>
</div>

我不明白为什么我的代码给我奇怪的结果。 它向我显示了一个按钮，该按钮位于我的输入框右侧。 我想要旁边的按钮！

这也是large-textbox类的内容：

.large-textbox {
    width: 100% !important;
}

Answer 1

在具有行的 bootstrap元素中（使用负边距-v.3.3和v.4 +中的flexbox），类始终必须紧跟具有列类的元素，例如

<div class="row">
   <div class="col-md-12"></div>
   ...and/or...
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

您可以删除行类，也可以在其后添加col *类。 你也不需要这种风格

.large-textbox {
    width: 100% !important;
}

编辑：同样，如果您正在使用引导程序4重命名input-group-btn到input-group-append