html - 内容不在 div 内

Question

我正在使用 Bootstrap，我的问题是“forecastDiv”中的内容 (ul) 不在“forecastDiv”边框内。一旦我删除了 Bootstrap 的网格系统，内容就会留在边框内，但我需要正确对齐我的内容，所以我需要使用网格系统。下面是我在 codepen 中的代码(转到 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"> . “容器”是一个 Bootstrap 类，它将把所有内容保存在 div 中。

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