Razor视图Bootstrap控件宽度

Question

我正在尝试创建一个屏幕，我已经添加了所有控件，所有这些控件都完全对齐网格，因为我使用了Bootstrap。但最后我有一个对Notes的控件，我希望它跨越整行，但它仍然没有跨越第一列...是否还有解决这个问题？

这是我的剃刀（仅与“备注”部分相关的代码）

            <div class="row top-space">
            <div class="col-xs-8">
                <div class="input-group">
                    @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-lg-2", @placeholder = "Notes" })
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <div class="input-group notes-area">
                    @Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control", @rows = 10, @cols = 500 } })
                    @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="row top-space">
            <div class="col-xs-12 form-inline">
                <input type="submit" value="Create" class="btn btn-default" style="margin: auto" />
            </div>
        </div>

这是我的输出：

我尝试使用TextArea并尝试指定Cols属性，但没有一个工作。是因为我已将整个屏幕划分为3列？