Bootstrap 3 Grid在Chrome Inspector中失败

如何解决Bootstrap 3 Grid在Chrome Inspector中失败

我目前正在学习使用Bootstrap来包装我在训练营中制作的作品集。我在另一个组件中使用了网格，但问题/列跳过为零，但由于某种原因，它在这里跳过，我只能想象它与所包含的元素有关。我在chrome检查器中检查了每个对象，但没有发现“ col”类在div之外留下任何东西...

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

实际行为：大多数时候都像预期的那样，但是出现奇怪的故障，左下角向右突出，从而将右下角的元素向下推了另一行。使用“在页面中选择要检查的元素”光标显示，发生这种情况时，某些容器的整体高度/宽度会发生变化。

我还发现，除去容器的高度/宽度（并因此暴露包含我的作品集的四个主要“视图”的整个vue-router组件的较暗背景）似乎消除了这四个容器的这种行为。 div包含图片/文本，位于“行行顶部” div内。因此，似乎有关宽度/高度为100％的容器的某些内容正在影响嵌套div中的项目的显示方式，但是在另一个“视图”组件中显示无文本的简单图像时，我遇到了0个问题... >

我没有最模糊的想法，为什么它只能在10到20像素长度内逐步执行此操作，而在谷歌浏览器中以“响应”模式调整大小。

Screenshot of problem 1

<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>

我似乎遇到的第二个问题是.container类，该类不能扩展到覆盖整个屏幕高度，而是在最小的iphone尺寸的某个令人讨厌的地方切断，所有元素都从该范围溢出容器（我知道这很可能是BASIC CSS的宽度/高度要求，但是我尝试将widht / height 100％放置在任何地方，并且这种行为与我尝试过的一样没有改变...）

Screenshot of problem 2