Twitter bootstrap 将引导列宽度调整为内容宽度

我正在为模式构建一个页脚，其中一个按钮是表单。我想要实现的是将前四个按钮放在左边，最后一个按钮放在右边。我希望Bootstrap4提供的行为是col-{brkpt}-auto类，但使用Bootstrap3

代码：

附加文件
上传外部审计
发送
拯救
取消

---

首先，你的小提琴有bootstrap 4 CSS和bootstrap 2 JS。我将其更改为使用3.3.7CSS和JS

您可以做两件事来让它工作：

使用

col-xs-10

将除“取消”之外的所有按钮包装在一个div中，并添加一个类，将

display:inline block

添加到该类中，使按钮位于一行

使取消按钮div具有

col-xs-2

以使用12列中的其余2列

CSS

HTML

附加文件
上传外部审计
发送
拯救
取消

col xs auto不是引导程序class@paddyfields：那么这是什么？您在JS提琴中引用了bootstrap3的css，并使用bootstrap4OK的标记，那么问题是如何在bootstrap3中实现相同的结果。相应地更新了问题。

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

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

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