Question

我使用的是Bootstrap，我的问题是＆＃34; forecastDiv＆＃34;中的内容（ul）。不在＆＃34; forecastDiv＆＃34;边界。一旦我删除了Bootstrap的网格系统，内容就会留在边框内，但我需要正确对齐我的内容，所以我需要使用网格系统。下面是我在codepen中的代码（转到＆＃34; 6天预测＆＃34; HTML注释）。任何帮助表示赞赏。谢谢。

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">添加“容器”或“容器流体”类。 “container”是一个bootstrap类，它将把所有内容保存在div中。

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

内容不在div

1 个答案: