按鈕同一行

對準我的觀點類似以下按鈕同一行

我試圖向下對準這個按鈕就像那些下降和標籤，在同一行

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

請告知

來源

2016-02-29 kez

你可以創建https://jsfiddle.net/演示？ –

@ G.L.P我知道你明白了嗎？ – kez

你需要像2dropdown一樣的所有元素，並提交按鈕？ – Kapil

請對此嘗試

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

你可以設置引導類根據自己的需要

來源

2016-02-29 05:37:21 Kapil

通過引導框架，我們可以在一排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>

來源

2016-02-29 05:40:16

引導是建立在12列行作爲證明in the grid system description。你最行有18列就那麼最後一組6人，其中包含你有一個問題有，被推到下一個「行」的按鈕。您應該製作直接從行大小4開始的列來解決此問題。

您可能還需要，因爲他們沒有在任何行所含所以他們的行爲可能會變得複雜以後與內列大小擺弄。

來源

2016-02-29 05:40:39 Lawrence

回答

相關問題