按钮同一行

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> 

你可以设置引导类根据自己的需要

Answer 2

通过引导框架，我们可以在一排12列使用，但在这里，你提到的18分 列打完12个columnns通过引导性质，它推到下一行。

如果您在同一行中要这么分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

引导是建立在12列行作为证明in the grid system description。你最行有18列就那么最后一组6人，其中包含你有一个问题有，被推到下一个“行”的按钮。您应该制作直接从行大小4开始的列来解决此问题。

您可能还需要，因为他们没有在任何行所含所以他们的行为可能会变得复杂以后与内列大小摆弄。