ブートストラップの幅をコンテンツ幅に合わせる

Question

私はモーダル用のフッターを作成していますが、ボタンの1つはフォームです。私が達成したいのは、最初の4つのボタンを左に、最後のボタンを右に持っていくことです。

<!-- Footer Default --> 
<div id="iAModalFooterDefault" class="container-fluid animated fadeInRight" style="margin-top: 10px;"> 
    <div class="row"> 

    <!-- Button: Attach Files --> 
    <div id="modalAttachFilesDiv" class="col-xs-auto"> 
     <button id="modalAttachFilesBTN" class="btn btn-primary stripBorder disabled" onclick="attachFiles()"> 
     Attach Files 
     </button> 
    </div> 

    <!-- Button (form): Upload External Audit --> 
    <div id="modalContentDiv" class="col-xs-auto"> 
     <form id="modalContentForm" style="width: 180px;"> 
     <label id="modalUploadExternalAuditBTN" class="btn btn-primary stripBorder disabled"> 
      Upload External Audit 
      <input type="hidden" name="modalUploadExternalAuditINPUT" id="modalUploadExternalAuditINPUT" type="file"> 
     </label> 
     <input type="hidden" name="reportId" id="reportIdContentForm"> 
     <input type="hidden" name="reportStateId" id="reportStateIdContentForm"> 
     <input type="hidden" name="reportName" id="reportNameContentForm"> 
     <input type="hidden" name="reportSectorId" id="reportSectorIdContentForm"> 
     <input type="hidden" name="reportTypeId" id="reportTypeIdContentForm"> 
     <input type="hidden" name="reportAuditorId" id="reportAuditorIdContentForm"> 
     <input type="hidden" name="reportStartDate" id="reportStartDateContentForm"> 
     <input type="hidden" name="reportEndDate" id="reportEndDateContentForm"> 
     <input type="hidden" name="reportCriteria" id="reportCriteriaContentForm"> 
     <input type="hidden" name="reportReach" id="reportReachContentForm"> 
     <input type="hidden" name="reportSummary" id="reportSummaryContentForm"> 
     <input type="hidden" name="reportConclusions" id="reportConclusionsContentForm"> 
     </form> 
    </div> 

    <!-- Button: Send --> 
    <div id="modalSendDiv" class="col-xs-auto"> 
     <button id="modalSendBTN" class="btn btn-primary stripBorder disabled" onclick="send()"> 
     Send 
     </button> 
    </div> 

    <!-- Button: Save --> 
    <div id="modalSaveDiv" class="col-xs-auto"> 
     <button id="modalSaveBTN" class="btn btn-primary stripBorder" onclick="save()"> 
     Save 
     </button> 
    </div> 

    <!-- Button: Cancel --> 
    <div id="modalCancelDiv" class="pull-right col-xs-auto"> 
     <button id="modalCancelBTN" class="btn btn-default" onclick="cancel()"> 
     Cancel 
     </button> 
    </div> 

    </div> 
</div> 

JSFiddle

Answer 1

まず第一に、あなたのフィドルは、ブートストラップ4を持っていた：私は4ブートストラップ動作がクラス-auto col- {brkpt}で提供していますが、ブートストラップ3

コードを使用したいですCSSとブートストラップ2 JS。 3.3.7 CSSとJSを使うように変更しました。

あなたはこの作業を取得するために2つのことを行うことができます。

1. ラップcol-xs-10でdivの中にキャンセルボタンが1行にしているので、それにdisplay: inline-blockを追加するクラスを追加を除いて、あなたのすべてのボタン。
2. キャンセルボタンのdivにcol-xs-2の残りの2つの12の列を使用するようにします。

Updated JSFiddle

CSS

.inline-block > div { 
    display: inline-block; 
} 

HTML

<!-- Footer Default --> 
<div id="iAModalFooterDefault" class="container-fluid animated fadeInRight" style="margin-top: 10px;"> 
    <div class="row"> 

    <div class="col-xs-10 inline-block"> 
     <!-- Button: Attach Files --> 
     <div id="modalAttachFilesDiv" class=""> 
     <button id="modalAttachFilesBTN" class="btn btn-primary stripBorder disabled" onclick="attachFiles()"> 
      Attach Files 
     </button> 
     </div> 

     <!-- Button (form): Upload External Audit --> 
     <div id="modalContentDiv" class=""> 
     <form id="modalContentForm"> 
      <label id="modalUploadExternalAuditBTN" class="btn btn-primary stripBorder disabled"> 
      Upload External Audit 
      <input type="hidden" name="modalUploadExternalAuditINPUT" id="modalUploadExternalAuditINPUT" type="file"> 
      </label> 
      <input type="hidden" name="reportId" id="reportIdContentForm"> 
      <input type="hidden" name="reportStateId" id="reportStateIdContentForm"> 
      <input type="hidden" name="reportName" id="reportNameContentForm"> 
      <input type="hidden" name="reportSectorId" id="reportSectorIdContentForm"> 
      <input type="hidden" name="reportTypeId" id="reportTypeIdContentForm"> 
      <input type="hidden" name="reportAuditorId" id="reportAuditorIdContentForm"> 
      <input type="hidden" name="reportStartDate" id="reportStartDateContentForm"> 
      <input type="hidden" name="reportEndDate" id="reportEndDateContentForm"> 
      <input type="hidden" name="reportCriteria" id="reportCriteriaContentForm"> 
      <input type="hidden" name="reportReach" id="reportReachContentForm"> 
      <input type="hidden" name="reportSummary" id="reportSummaryContentForm"> 
      <input type="hidden" name="reportConclusions" id="reportConclusionsContentForm"> 
     </form> 
     </div> 

     <!-- Button: Send --> 
     <div id="modalSendDiv" class=""> 
     <button id="modalSendBTN" class="btn btn-primary stripBorder disabled" onclick="send()"> 
      Send 
     </button> 
     </div> 

     <!-- Button: Save --> 
     <div id="modalSaveDiv" class=""> 
     <button id="modalSaveBTN" class="btn btn-primary stripBorder" onclick="save()"> 
      Save 
     </button> 
     </div> 
    </div> 
    <!-- Button: Cancel --> 
    <div id="modalCancelDiv" class="pull-right col-xs-2"> 
     <button id="modalCancelBTN" class="btn btn-default" onclick="cancel()"> 
     Cancel 
     </button> 
    </div> 

    </div> 
</div>