フォームの残りの部分をブートストラップで整列する

Question

ブートストラップクラスを使用しているときにボタンを残りの部分に合わせる際に問題があります。

私が試したことはすべてうまくいかなかった。

ボタン「を使用する会社の営業時間は、」右にあまり動かされます。コントロールの 残りはこのようCOLクラスを使用して配置されている：私はCOL-MD-4またはCOL-MD-3ボタンを置くどちらのクラス

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

がインライン化されていません。 私は、margin-rightプロパティをボタンに与えようとしましたが、すべての画面サイズで確実に機能するかどうかはわかりません。

これを正しいテキストボックスと "アクティブ"ボタンと整列させる方法はありますか？

Answer 1

あなたのボタンは、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>