Я использую модальный (из 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
? Это очень раздражает и трудно отображать таким образом. Как проще всего отобразить кнопки и заголовок, как показано?