Html Chrome Inspector中的Bootstrap 3网格故障

我目前正在学习使用Bootstrap来包装我在训练营中制作的投资组合。我在另一个组件中使用了网格，没有问题/跳过列，但出于某种原因，它在这里跳过了，我只能想象它与包含的元素有关。我检查了chrome inspector中的每一个，我没有看到任何东西粘在“col”类的div之外

预期行为：2列，每列有2行（4个项目的2x2网格）

实际行为：大多数情况下与预期一样，但在左下角突出到右侧的地方出现了奇怪的小故障，将右下角元素推下了另一行。使用“在页面中选择一个元素进行检查”光标可以发现，当发生这种情况时，某些容器的总高度/宽度会发生变化

我还发现，去掉容器的高度/宽度（从而暴露整个vue路由器组件的较暗背景，其中包含我的公文包的四个主要“视图”）似乎消除了“row-row-mar-top”div中包含图像/文本的四个div的这种行为。因此，似乎具有100%宽度/高度的容器会影响嵌套div中的项目的显示方式，但在另一个“view”组件中显示没有文本的简单图像时，我没有任何问题

我一点也不知道为什么它在google chrome inspector上以“响应”模式调整大小时，只能在10-20像素的长度内逐渐调整大小

项目
SubSala是一个受Airbnb启发的电子商务网站，我设计该网站的目的是为一次性活动寻找出租空间。它在整个用户配置文件中使用AirBnB日历和条带API以及CRUD操作。


我为的用户开发了一个配套工具
他们可以
按国家/城市和事件类型搜索并保存事件。（通过Expo应用程序在移动设备上运行）


我创建了一个更有趣的反应待办事项列表
动态更改上面显示的消息和任务数
留下来完成，再加上一些复活节彩蛋。


我用React、Redux创建了一个提醒应用程序来处理
状态，GraphQL来管理对AWS Amplify cloud的后端调用
数据库和Bulma CSS框架。

从“./components/BackBtn.vue”导入BackBtn；
导出默认值{
组成部分：{
backbtn:backbtn，
},
};
a{
颜色：番茄；
}
img{
宽度：300px；
高度：350px；
边界半径：5px；
}
.集装箱{
宽度：100%；
身高：100%；
背景#028090；
颜色：#f0f3bd；
}
.回来{
边框：1px实心#028090；
}
罗马托普酒店{
宽度：100%；
边缘顶部：1米；
}
.行项目垫{
填充：1em；
}

我似乎遇到的第二个问题是.container类，它没有扩展到覆盖整个屏幕高度，而是在最小的iphone大小的某个恼人的地方被截断，所有元素都从该容器中溢出（我知道这很可能是基本的CSS宽度/高度要求，但我尝试将宽度/高度100%放置在所有位置，但没有改变我尝试的行为…）

<template>
    <div class="container animate__animated animate__fadeIn animate__faster">
        <h1>Projects</h1>
        <backbtn></backbtn>

        <div class="row row-mar-top">

            <div class="rowItem-pad col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <a href="http://159.89.1.248/home">
                    <img src="../assets/general-assets/subsala.png">
                </a>
                <p>SubSala is an e-commerce site inspired by Airbnb that I designed to find spaces to rent for one-off events. It uses the AirBnB Calendar and Stripe APIs and CRUD operations throughout the user profiles.
                </p>
                <h5>
                    <a href="https://gitlab.com/jacobwhitt/sub-sala-project">
                        (Gitlab Repo)
                    </a>
                </h5>
            </div>

            <div class="rowItem-pad col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <a href="https://expo.io/@jwhitty/projects/snack-59c2cd34-2c4b-44b7-90d0-82ae5cd4fb6b">
                    <img src="../assets/general-assets/goabase.png">
                </a>
                <p>
                    I developed a companion tool for users of
                    <a href="http://goabase.net">Goabase</a> with which they can
                    search for and save events by country/city and type of events. (Runs on mobile devices via the Expo App)
                </p>
                <h5>
                    <a href="https://gitlab.com/jacobwhitt/goa-base-mobile-app">
                        (Gitlab Repo)
                    </a>
                </h5>
            </div>

            <div class="rowItem-pad col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <a href="https://moderntodolist.netlify.app/">
                    <img src="../assets/general-assets/moderntodolist.png">
                </a>
                <p>
                    I created a more interesting React Todo List that
                    dynamically changes the messages displayed above and the number of tasks
                    left to complete with completion, plus some easter eggs.
                </p>
                <h5>
                    <a href="https://gitlab.com/jacobwhitt/modern-todo-list">
                        (Gitlab Repo)
                    </a>
                </h5>
            </div>

            <div class="rowItem-pad col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <a href="https://asimplereminder.netlify.app/">
                    <img src="../assets/general-assets/asimplereminder.png">
                </a>
                <p>
                    A reminders app I created using React, Redux to handle the
                    state, GraphQL to manage the backend calls to AWS-Amplify cloud
                    database, and the Bulma CSS framework.
                </p>
                <h5>
                    <a href="https://gitlab.com/jacobwhitt/a-simple-reminder">
                        (Gitlab Repo)
                    </a>
                </h5>
            </div>

        </div>

    </div>
</template>

<script>
    import BackBtn from "../components/BackBtn.vue";

    export default {
        components: {
            backbtn: BackBtn,
        },
    };
</script>

<style scoped>
    a {
        color: tomato;
    }
    img {
        width: 300px;
        height: 350px;
        border-radius: 5px;
    }

    .container {
        width: 100%;
        height: 100%;
        background: #028090;
        color: #f0f3bd;
    }
    .back {
        border: 1px solid #028090;
    }
    .row-mar-top {
        width: 100%;
        margin-top: 1em;
    }
    .rowItem-pad {
        padding: 1em;
    }
</style>