Question

我正在尝试在嵌套在另一个Bootstrap网格中的两列Bootstrap 4网格中编写一个可水平滚动的视口。如何获取看板的视口以在其父列中保持响应，并使其占据整个页面高度（顶部导航栏除外）？

这是一个开源协作游戏设计/项目管理工具，具有与HacknPlan相似的功能。对于看板，我尝试使用position: fixed来占据页面的其余高度，我尝试使用各种Bootstrap实用程序和网格类来正确地布局，但是我总是最终导致董事会不占用页面的其余部分，或者被页面的侧面或“当前任务”列切断。

这是托管看板和“当前任务”列的Vue组件的代码。（已省略了不必要的代码。）

<template>
    <div>
        <!-- section title stuff -->

        <b-row>
            <b-col class="kanban">
                <!-- The actual kanban board that the user can scroll horizontally -->
                <div class="kanban-inner" @mousedown.left="startDrag" @mouseup.left="endDrag" v-on:mousemove="drag" id="kanbanBoard">
                    <b-card title="Pending">
                        Let's just pretend there are tasks here.
                    </b-card>
                    <b-card title="In progress">
                        Let's just pretend there are tasks here.
                    </b-card>
                    <b-card title="In review">
                        Let's just pretend there are tasks here.
                    </b-card>
                    <b-card title="Completed">
                        Let's just pretend there are tasks here.
                    </b-card>
                </div>
            </b-col>
            <b-col lg="6" v-if="currentTask" class="offset-lg-6">
                Hello world! This is the "Current task" UI.
            </b-col>
        </b-row>
    </div>
</template>

<script>
export default {
    name: 'tasks',
    data: () => ({
        currentTask: null,
    }),
};
</script>

<style scoped>
/* Allows the inner viewport to take up the entire page, but breaks the entire Bootstrap grid system, yay. */
.kanban {
    position: fixed;
    height: 100%;
}

/* Allows horizontal scrolling and prevents children from wrapping to a new line, should take entire rest of page height */
.kanban-inner {
    overflow-x: auto;
    white-space: nowrap;
    height: 100%;
}

/* Makes the cards inside the kanban board display in a horizontal row rather than vertically like Bootstrap normally would. */
.kanban-inner > .card {
    display: inline-block;
    float: none;
}
</style>

我希望上面的代码可以使.kanban-inner div可以水平滚动，占据其余所有可用页面高度，并使其响应其父.kanban div的宽度，应该由Bootstrap网格系统进行布局，从而应对另一个“当前任务”列是否可见并占用可用的水平空间。但是，取而代之的是，当前截断了木板，并覆盖了“当前任务”列，或者如果看不见上述列，则覆盖了页面的右边缘。（您无法将最后一张卡片的一小部分完全滚动到视图中，它总是被切断。）

如何在Bootstrap-Vue中进行水平滚动的列/视口，该列/视口占用页面高度

0 个答案: