Css 引导4容器大于移动屏幕宽度

我为我的新项目跳转到Bootstrap 4，现在当我在移动设备上测试时，容器的宽度超过了我的移动设备（iphone和android galaxy s8）的宽度，我不知道这是否是由于flexbox的问题造成的

不管怎么说，这是我的代码和一张图片来展示我在说什么

<div class="container">
    <div class="row mb-4">
        <div class="col-xl-8 col-lg-7 col-12 mt-4">
            <h2 class="lead">Courses</h2>

            <div class="course-cards" id="course-cards">
                <%= render "course-cards" %>
            </div>          

            <button class="mt-4 btn btn-secondary btn-full" id="add-course">
                <i class="fa fa-plus-square-o large"></i>
            </button>
        </div>      
        <div class="col-xl-4 col-lg-5 col-12 mt-4">
            <h2 class="lead">Result</h2>
            <div class="well mt-4 main-result-box">
                <div class="well dark mt-0 text-center">
                    <p class="result big-text text-success mb-0">--</p>
                </div>
                <button data-toggle="tooltip" data-placement="top" title="Re Calculate" level="college" class="calculate btn btn-success btn-full mt-4">
                    <i class="fa fa-calculator small"></i>
                    Calculate
                </button>
            </div>
            <div class="clear"></div>
            <h2 class="lead mt-4">Help</h2>
            <div class="well mt-4">
                <h4>How To</h4>

                <ol class="circle mt-4">
                    <li>
                        <strong>Enter Your Course Info</strong>
                        <p>Fill out the information in each course block including your Grade and the amount of units received for each.</p>
                    </li>
                    <li>
                        <strong>Add Courses if Neccessary</strong>
                        <p>If necessary, add course by clicking the blue button below the course blocks.</p>
                    </li>
                    <li>
                        <strong>Finish Up</strong>
                        <p>Your GPA will be calculated automatically and appear in the green box below the Add Course button. </p>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

课程
结果
--
算计
帮助
如何

输入您的课程信息
填写每个课程模块中的信息，包括你的成绩和每个模块收到的单元数量



必要时添加课程
如有必要，单击课程块下方的蓝色按钮添加课程



结束
您的GPA将自动计算并显示在“添加课程”按钮下方的绿色框中

以下是我所说的移动设备的图片：

---

我认为问题与您的

表格

没有按窗口宽度折叠有关。将

overflow:hidden

添加到

.page wrap

中，您将看到一切正常，因为它切断了

表

我认为问题与您的

表

没有在该窗口宽度处折叠有关。将

overflow:hidden

添加到

.page wrap

中，您将看到一切正常，因为它切断了

表