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

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>

I don't understand why my code is giving me weird results. It's showing me a button that is shot way to right of my input box. I want the button right next to it!

Also here is the contents of the large-textbox class:

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

Answer 1

In bootstrap element which has row (it uses negative margin - v.3.3 and flexbox in v.4+) class always must be followed by element with column class eg

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

You can either remove the row class or add col* class right after it. Also you don't need this style

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

Edit: Also if you are using bootstrap 4 rename input-group-btn to input-group-append