2017-08-21 32 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>