Отображение кнопок и заголовка в моде bootstrap

Question

Я использую модал (от 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> разрывается, хотя места есть. Мне удалось это сделать, используя следующий topi c. Но сейчас я не могу исправить название. Почему Bootstrap использует display: flex? Это очень раздражает и трудно отображать таким образом. Как проще всего отобразить кнопки и заголовок, как показано?

Answer 1

Используйте ml-auto на вашем div, оборачивая кнопки. Это направит их sh вправо, не пытаясь занять как можно больше места, которое делает 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>

Answer 2

потому что вы используете стиль w-100 для оболочки кнопок. <div class="w-100">, удалите, чтобы решить эту проблему