按钮在同一行对齐答案

【问题标题】：button align at same row按钮在同一行对齐
【发布时间】：2016-02-29 05:25:09
【问题描述】：

我有如下观点

我正在尝试将此按钮对齐，就像那些下拉和标签一样，在同一行中

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

请指教

【问题讨论】：

你能在jsfiddle.net创建一个演示吗？
@G.L.P 我听不懂你说什么？
你需要在同一行中的所有元素像 2dropdown 和提交按钮？？
@Kapil 是的，exaclty，我尝试将相同的 css 类应用于输入文件，但似乎不起作用
@kez 请尝试我的回答

标签： html razor razor-2 razorengine

【解决方案1】：

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

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

【讨论】：

【解决方案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>

您可以根据需要设置引导类

【讨论】：

【解决方案3】：

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

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

检查此代码将 div 类名称更改为 col-xs-4。希望它能正常工作

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

【讨论】：