适配Bootstrap列的宽度以适应内容宽度

Question

我正在为一个模态框构建页脚，其中一个按钮是一个表单。我的目标是将前四个按钮放在左侧，最后一个按钮放在右侧。我想使用 bootstrap 3 的 col-{brkpt}-auto 类提供的行为，但是要实现 bootstrap 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

- DVHeld

---

col-xs-auto 不是 Bootstrap 的类。 - paddyfields

@paddyfields：那这是什么？https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content - DVHeld

你在JS Fiddle中引用了Bootstrap 3的CSS，并使用了Bootstrap 4的标记。 - paddyfields

好的，那么问题是如何在Bootstrap 3中实现相同的结果。已相应更新问题。 - DVHeld

Answer 1

首先，您的代码片段使用了Bootstrap 4的CSS和Bootstrap 2的JS。我将其更改为使用3.3.7版本的CSS和JS。

要使其正常工作，您可以采取以下两种方法：

1. 将除“取消”按钮外的所有按钮都包装在一个带有 col-xs-10 的 div 中，并添加一个类来添加 display: inline-block，以便将按钮放在同一行。
2. 使您的“取消”按钮的 div 具有 col-xs-2，以使用剩余的12列中的2列。

更新后的 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>

- Tricky12