Vue-Bootstrap पैनल पर मेरे पिछले प्रश्न के आधार पर मैंने इसका उपयोग करना शुरू किया पैनल बनाने के लिए निम्नलिखित कोड:


<b-card no-body class="mb-1">
    <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block disabled href="#" v-b-toggle.accordion-1 variant="info">Search:</b-button>
    </b-card-header>
    <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
        <b-card-body>
            <search-form :fieldList="fieldList" :customs-max-num="customsMaxNum" :data-types="dataTypes" />
        </b-card-body>
    </b-collapse>
</b-card>

जैसा कि आप देख सकते हैं, मैं एक हेडर के रूप में एक बटन। लेकिन क्या होगा अगर मैं कुछ और जटिल करना चाहता हूं? उदाहरण के लिए मैं निम्नलिखित शीर्षलेख बनाना चाहता हूं:

enter image description here

जैसा कि आप देख सकते हैं, इस हेडर में एक शीर्षक और एक बटन होता है। अगर मैं इसे पहले की तरह करता हूं, तो मेरे पास बटन पर एक बटन और टेक्स्ट होगा? सही नहीं लगता। मेरे पास वर्तमान में क्या है:

<b-card no-body class="mb-1">
    <b-card-header header-tag="header" class="p-1" role="tab">
        <div class="title align-left" height="100px">
            <button class="pull-right btn btn-info" @click="goBack()">Go Back</button>
            <strong>Data run:</strong>
            {{ title() }} <br> {{ subtitle() }}
        </div>
    </b-card-header>
    <!-- BODY -->
</b-card>

यह कैसा लग रहा है:

enter image description here

मैं ऐसा पैनल कैसे बनाऊं?

0
vesii 20 मार्च 2020, 02:37

1 उत्तर

सबसे बढ़िया उत्तर

आप अपने हेडर पर display: flex का उपयोग करके इस रूप को प्राप्त कर सकते हैं। अपने शीर्षलेख में d-flex वर्ग जोड़ें और अपने बटन को एक div में लपेटकर उसे ml-auto वर्ग दें, यह वर्ग margin-left: auto; शैली लागू करता है

margin-left: auto के अंदर display:flex का उपयोग करने से खाली जगह एक मार्जिन से भर जाएगी, सामग्री को विपरीत दिशा में धकेल देगी।

<b-card no-body class="mb-1">
  <b-card-header header-tag="header" role="tab" class="d-flex">
    <div class="title align-left" height="100px">
      <strong>Data run:</strong> Title<br> 
      Subtitle
    </div>
    <div class="ml-auto">
      <button class="btn btn-info">Go Back</button>
    </div>
  </b-card-header>
</b-card>
new Vue({
  el: "#app"
});
<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@2.7.0/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-card no-body class="mb-1">
    <b-card-header header-tag="header" role="tab" class="d-flex">
      <div class="title align-left" height="100px">
        <strong>Data run:</strong> Title<br> 
        Subtitle
      </div>
      <div class="ml-auto">
        <button class="btn btn-info">Go Back</button>
      </div>
    </b-card-header>
  </b-card>
</div>
1
Hiws 20 मार्च 2020, 11:02