我目前正在用Nuxt2和布爾瑪做一個項目。在我的頁面的一個部分，我有一個& ltdiv & gt使用六個布爾瑪列的元素和占用兩列的元素。但是，我面臨一個問題，即使div的內容只占據了6列，元素本身卻占據了整個寬度，而不是與其內容對齊，導致元素呈現在其下方。我希望元素根據其內容只占用必要的寬度。

<template>
  <div v-if="boolean" class="columns is-multiline is-centered">
    <div class="header column is-12 mt-5 has-text-centered" :style="styleHeader">
      <img class="bgImage is-inline-block" :style="styleHeaderImg" v-if="post.attributes.media.data !== null" :src="imgSrc" />

      <h1 class="title overText">  </h1>
    </div>

    <div class="body">
      <template v-for="(item, index) in body">
        <h1 v-if="item.title" class="title bodyContent mt-5" style="font-size: 25px;">  </h1>

        <template class="columns" v-if="!item.title && post.attributes.media.data !== null && index > 1 && (index % 2) != 0">
          <div class="column is-6 bodyContent" v-html="$md.render(item.txt)"></div>
          <img class="column is-2" src="../assets/image.png">
        </template>
      </template>
    </div>
  </div>
</template>

<style scoped>
  .bgImage {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(5px)
  }

  .overText {
    position: absolute;
    z-index: 3;
    top: 60%;
    left: 5%;
    background-color: #f0eff4;
    color: #121212
  }

  .header {
    position: relative;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    background-image: url("../assets/women@infLogo.png");
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .body {
    background-color: #bdd0db;
    border-radius: 0 0 5px 5px;
  }

  .bodyContent {
    margin-left: 5%;
  }
</style>

我將感謝任何關于如何解決這個問題的見解或建議。提前感謝！