时间戳

首页 > 解决方案 > 在引导模式中显示按钮和标题

css - 在引导模式中显示按钮和标题

问题描述

我正在使用模态（来自 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>标题中断了，即使有空间。我设法做到了，使用以下主题。但现在我似乎无法修复标题。为什么 Bootstrap 使用display: flex? 这很烦人，很难以这种方式显示。显示按钮和标题的最简单方法是什么？

标签： cssbootstrap-4vuejs2bootstrap-modalbootstrap-vue

解决方案

用于ml-auto包装按钮的 div。这会将它们推向右侧，而不会试图占用尽可能多的空间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>

推荐阅读