Показване на бутони и заглавие в режим на първоначално зареждане

Използвам модален (от 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? Много е досадно и трудно се показва по този начин. Кой е най-лесният начин за показване на бутоните и заглавието, както е показано?

vesii 19.03.2020 източник

Отговори (2)

arrow_upward
1
arrow_downward

Използвайте ml-auto на вашия div, обвивайки бутоните. Това ще ги избута надясно, без да се опитва да заеме възможно най-много място, което прави w-100.

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

<link href="/bg//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/bg//unpkg.com/[email protected]/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>

Hiws 19.03.2020

arrow_upward
0
arrow_downward

това е така, защото използвате стил w-100 за обвивката на бутона. <div class="w-100">, премахването му ще реши този проблем

Hank X 19.03.2020

Показване на бутони и заглавие в режим на първоначално зареждане

Отговори (2)

Подобни въпроси