Question

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

代码：

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

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

你可以做两件事来实现这个目的：

在col-xs-10的div中包含除“取消”以外的所有按钮，并添加一个添加display: inline-block的类，以便按钮位于一行。
使取消按钮div col-xs-2使用12列中剩余的2列。

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>

使bootstrap col宽度适合内容宽度

1 个答案: