在引导模式中显示按钮和标题答案

【问题标题】：Displaying buttons and a title in bootstrap modal在引导模式中显示按钮和标题
【发布时间】：2020-06-30 02:40:59
【问题描述】：

我正在使用模态（来自 vue-bootstrap）并且我编写了以下代码：

<template id="child">
    <b-modal v-model="showModal" size="lg">
        <template v-slot:modal-header>
            <h4 class="modal-title">
                <b>{{ title }}: {{ detailedResults.pid }}</b>
            </h4>
            <div class="w-100">
                <b-button variant="light border-dark" class="btn btn-primary action_btn float-right" v-on:click="closeModal">
                    Close
                </b-button>
                <b-button variant="light border-dark" class="btn btn-primary action_btn float-right" v-on:click="copyFullPath">
                    Copy full path
                </b-button>
                <b-button v-if="checkIfNotMainPID()" variant="light border-dark" class="btn btn-primary action_btn float-right" v-on:click="parentFunc(detailedResults.ppid)">
                    Move to parent
                </b-button>
            </div>
        </template>

    </b-modal>
</template>

地点：

    .action_btn {
        margin: 0 5px;
    }

    .float-right {
        float: right;
    }

    .align-left {
        text-align: left;
    }

    h4 {
        float: left;
        font-size: 18px;
    }

我想得到以下标题：

但目前我得到：

如您所见，我已经设法一一显示按钮，但 <h4> 标题中断，即使有空间。我设法做到了，使用以下topic。但现在我似乎无法修复标题。为什么 Bootstrap 使用display: flex？这很烦人，很难以这种方式显示。显示按钮和标题的最简单方法是什么？

【问题讨论】：

标签： css bootstrap-4 vuejs2 bootstrap-modal bootstrap-vue

【解决方案1】：

在包裹按钮的 div 上使用 ml-auto。这会将它们推向右侧，而不会像 w-100 那样占用尽可能多的空间。

new Vue({
  el: "#app",
  data() {
    return {
      showModal: true
    }
  }
});

<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="//unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <b-btn @click="showModal = true">Open Modal</b-btn>
  <b-modal v-model="showModal" size="xl">
    <template v-slot:modal-header>
      <h4 class="modal-title">
        <b>Note Full Report: 1234</b>
      </h4>
      <div class="ml-auto">
        <b-button variant="light" class="border-secondary">
          Move to parent
        </b-button>
        <b-button variant="light" class="border-secondary">
          Copy full path
        </b-button>
        <b-button variant="light" class="border-secondary">
          <b-icon-x></b-icon-x> Close
        </b-button>
      </div>
    </template>
  </b-modal>
</div>

【讨论】：

【解决方案2】：

那是因为您在按钮包装器中使用了w-100 样式。 <div class="w-100">，删除它会解决这个问题

【讨论】：