内容不在div之内

Question

我正在使用Bootstrap，我的问题是“ forecastDiv”中的内容（ul）不在“ forecastDiv”边框内。 一旦删除Bootstrap的网格系统，内容将保留在边界内，但是我需要正确对齐内容，因此需要使用网格系统。 下面是我在一个代码笔中的代码（转到HTML中的“ 6天预报”注释）。 任何帮助表示赞赏。 谢谢。

HTML

<div id="forecastDiv">

    <div class="col-md-1" id="boxInfo0">
        <p id="forecast0">0
        </p>

        <p id="forecast0TempC">0
        </p>

        <p id="day0">Test
        </p>
    </div>

    <div class="col-md-1" id="boxInfo1">
        <p id="forecast1">0
        </p>

        <p id="forecast1TempC">0
        </p>

        <p id="day1">Test
        </p>
    </div>

    <div class="col-md-1" id="boxInfo2">
        <ul id="forecast2">0
        </ul>

        <ul id="forecast2TempC">0
        </ul>

        <ul id="day2">Test
        </ul>
    </div>

    <div class="col-md-1" id="boxInfo3">
        <ul id="forecast3">0
        </ul>

        <ul id="forecast3TempC">0
        </ul>

        <ul id="day3">Test
        </ul>
    </div>

    <div class="col-md-1" id="boxInfo4">
        <ul id="forecast4">0
        </ul>

        <ul id="forecast4TempC">0
        </ul>

        <ul id="day4">Test
        </ul>
    </div>

    <div class="col-md-1" id="boxInfo5">
        <ul id="forecast5">0
        </ul>

        <ul id="forecast5TempC">0
        </ul>

        <ul id="day5">Test
        </ul>
    </div>

</div> <!-- end forecastDiv -->

CSS

#forecastDiv {
width: 100%;
border: solid black;
margin: 0 auto; }

https://codepen.io/mcmaster-99/pen/ybWvyy

Answer 1

在您的<div id="forecastDiv">添加“容器”或“容器流体”类。 “容器”是一个引导类，它将所有内容保留在div中。

<div class="container" id="forecastDiv">