Page 在使用 Bootstrap 5 和 Vue 时会创建一个向右滚动条

Question

我正在使用 bootstrap 5.0.2 和 Vue 3 构建一个页面。我有一个标题、一个基本下拉菜单和一个输入。问题是我的页面创建了一个“滚动”，我可以将其移动到右侧。

这是标题：

  <div class="container d-flex">

    <a class="navbar-brand " href="#">HS Data Translation</a>

    <button v-if="store.isAuthenticated.value" class="btn btn-danger" @click="store.logout">Logout</button>

  </div>

这是页面：

<div class="col-5">

    <div class="btn-group" uib-dropdown>

        <button type="button" class="btn btn-default btn-block dropdown-toggle" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">

            <span v-if="!store.selectedClinic.value">Choose a clinic...</span>

            <span v-if="store.selectedClinic.value">{{ store.selectedClinic.value.name}} - ID {{ store.selectedClinic.value.clinicId }}</span>

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" uib-dropdown-menu>

            <li v-for="item in store.lookupClinics.value" class="dropdown-item" :key="item.clinicId">

                <a href="#" @click="store.selectClinic(item)">{{item.name}} - ID {{item.clinicId}}</a>

            </li>

        </ul>

    </div>

</div>

        <div class="col-3">

            <input type="text" class="form-control"  :value="store.selectedClinic.value ? store.selectedClinic.value.publicKey : ''" readonly />

        </div>

Answer 1

通过添加容器修复它