2017-08-21 59 views
0

當我使用引導類時,我的對齊按鈕與其餘部分出現了問題。使用Bootstrap將表單的其餘部分與對齊按鈕

我試過的一切都沒有奏效。

enter image description here

按鈕「使用公司營業時間」移動太多的權利。控件的其餘 定位通過使用像這樣的山口類:

<div class="row"> 
    <section class="col col-md-3 col-lg-3 col-sm-3 col-xs-3 "> 
     @Html.LabelFor(model => model.TeamDetailModel.Company, new { @class = "control-label" }) 
    </section> 
    <section class="col col-md-4 col-lg-4 col-sm-4 col-xs-4 "> 
     @if (fullAccess) 
     { 
      <label class="select"> 
       @Html.DropDownListFor(m => m.TeamDetailModel.CompanyId, new SelectList(Model.CompanyCollection, "Id", "CompanyName", Model.TeamDetailModel.CompanyId), "Select Company", new { @class = "select2", @style = "width:100%; height:32px" }) 
      </label> 
     } 
     else if (viewOnly) 
     { 
      <label class="select state-disabled"> 
       @Html.DropDownListFor(m => m.TeamDetailModel.CompanyId, new SelectList(Model.CompanyCollection, "Id", "CompanyName", Model.TeamDetailModel.CompanyId), "Select Company", new { @class = "select2", @style = "width:100%; height:32px", disabled = "disabled" }) 
      </label> 
     } 
     @Html.ValidationMessageFor(model => model.TeamDetailModel.Company) 
    </section> 
    @if (fullAccess) 
    { 
     <section class="col col-md-5 col-lg-5 col-sm-5 col-xs-5"> 
      <a class="btn btn-primary" id="copy_hours_for_team"><small>Use Company Business Hours</small></a> 
     </section> 
    } 
</div> 

無論I類放COL-MD-4或COL-MD-3按鈕沒有內聯。 我試過給按鈕設置一個保證金屬性,但我不確定它是否適用於所有屏幕尺寸。

有沒有一種方法來校準 - 右邊的文本框和「活動」按鈕?

+2

你可以提供工作jsfiddle或實際的代碼。 –

回答

0

如果你希望你的按鈕對準left side,在你的按鈕使用float-left類,請按照下面的代碼 -

<a class="btn btn-primary float-left" id="copy_hours_for_team"> 
    <small>Use Company Business Hours</small> 
</a> 

如果你希望你的按鈕對準center,給父母DIV text-center類,並添加float-none到按鈕,請按照下面的代碼 -

<section class="col col-md-5 col-lg-5 col-sm-5 col-xs-5 text-center"> 
<a class="btn btn-primary float-none" id="copy_hours_for_team"> 
    <small>Use Company Business Hours</small> 
</a> 
</section>