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

Bootstrap构建在12列的行上，如in the grid system description所示。你最外面的一行有18列，所以包含你遇到问题的按钮的最后一组6正被推到下一行＆＃39;。您应该使直接从行大小4下降的列来解决此问题。

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

Answer 2

请尝试这个

<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>

您可以根据需要设置bootstrap类

Answer 3

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

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

检查此代码将div类名更改为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>

按钮对齐在同一行

3 个答案: