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

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

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

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

您可以删除 row 类，也可以在其后添加 col * 类。 而且您不需要这种样式

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

编辑：另外，如果您使用的是引导程序4，则将 input-group-btn 重命名为 input-group-append