按钮对齐在同一行

Question

我有如下观点

我正在尝试将此按钮与那些下拉菜单和标签对齐，在同一行中

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            @Html.LabelFor(m => m.SelectedMonth, htmlAttributes: new { @class = "control-label col-xs-6" })
            <div class="col-xs-6">
                @Html.DropDownListFor(model => model.SelectedMonth, (IEnumerable<SelectListItem>)ViewBag.Months, "Month", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.SelectedMonth, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="col-xs-6">
        <div class="form-group">
            @Html.LabelFor(m => m.SelectedYear, htmlAttributes: new { @class = "control-label col-xs-6" })
            <div class="col-xs-6">
                @Html.DropDownListFor(model => model.SelectedYear, (IEnumerable<SelectListItem>)ViewBag.Years, "Year", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.SelectedYear, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="col-xs-6">
        <div class="form-group">

            <div style="width:70%; float:left; height: 20px; text-align:left" class="control-label col-xs-6">
                <input type="submit" value="Download Data File"/>
            </div>

        </div>
    </div>
</div>

请指教

Answer 1

请试试这个

<form class="form-horizontal">
    <div class="row">
        <div class="col-xs-4">
            <div class="form-group">
                @Html.LabelFor(m => m.SelectedMonth, htmlAttributes: new { @class = "control-label col-xs-6" })
                <div class="col-xs-6">
                    @Html.DropDownListFor(model => model.SelectedMonth, (IEnumerable<SelectListItem>)ViewBag.Months, "Month", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.SelectedMonth, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="form-group">
                @Html.LabelFor(m => m.SelectedYear, htmlAttributes: new { @class = "control-label col-xs-6" })
                <div class="col-xs-6">
                    @Html.DropDownListFor(model => model.SelectedYear, (IEnumerable<SelectListItem>)ViewBag.Years, "Year", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.SelectedYear, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="form-group">
                <div style="width:70%; float:left; height: 20px; text-align:left" class="control-label col-xs-6">
                    <input type="submit" value="Download Data File"/>
                </div>
            </div>
        </div>
    </div>
</form>

您可以根据需要设置bootstrapclass

Answer 2

通过bootstrap框架我们可以在一行中使用12列但是这里你提到了18 列所以在 bootstrap 性质的 12 列之后它推到下一行。

如果你想在同一行，那么 div将 12 列分成 3 列，如 .col-xs-4 .col-xs-4 .col-xs-4

检查此代码将 div class 名称更改为 col-xs-4.hope 它会起作用

<div class="row">
<div class="col-xs-4">
    <div class="form-group">
        @Html.LabelFor(m => m.SelectedMonth, htmlAttributes: new { @class = "control-label col-xs-6" })
        <div class="col-xs-6">
            @Html.DropDownListFor(model => model.SelectedMonth, (IEnumerable<SelectListItem>)ViewBag.Months, "Month", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.SelectedMonth, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

<div class="col-xs-4">
    <div class="form-group">
        @Html.LabelFor(m => m.SelectedYear, htmlAttributes: new { @class = "control-label col-xs-6" })
        <div class="col-xs-6">
            @Html.DropDownListFor(model => model.SelectedYear, (IEnumerable<SelectListItem>)ViewBag.Years, "Year", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.SelectedYear, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

<div class="col-xs-4">
    <div class="form-group">

        <div style="width:70%; float:left; height: 20px; text-align:left" class="control-label col-xs-6">
            <input type="submit" value="Download Data File"/>
        </div>

    </div>
</div>

Answer 3

Bootstrap 建立在 12 列的行上，如 in the grid system description 所示。最外面的一行有 18 列，因此包含您遇到问题的按钮的最后一组 6 被推到下一个 'row'。您应该使行大小直接为 4 的列来解决此问题。

您可能还需要 fiddle 内列大小，因为它们不包含在任何行中，因此它们的行为以后可能会变得复杂。

按钮对齐在同一行

button align at same row

html

razor

razor-2

razorengine