我正在使用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

#1楼 票数:0 已采纳

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

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

  ask by MarocCoder translate from so

未解决问题?本站智能推荐:

1回复

div内容不在外部固定div内

我有一个固定位置的div / modal,其中包含modal-header,modal-body和modal-footer,当我减小高度(到大约650px或以下)时,modal-body内容和modal-footer不会t停留在固定的div / modal中并开始移出视口。 如何确保模态主体和
3回复

引导形式不在div的中心

我有一个bootstraap表单,其中两个字段我添加了.d-inline-block类,使其彼此相邻,而另一个字段我没有添加该类,因此它位于这两个字段之下。 我希望它位于div的中心,但我无法做到。 仅前两个字段会居中,而最后一个div不在中心。 有人可以指出错误吗?
1回复

页脚不在内容的结尾

我在尝试使我的页脚真正停留在内容底部时遇到了麻烦。 我尝试了bootstrap粘性页脚示例,但对我而言不起作用。 任何帮助和代码建议表示赞赏。 这是CSS。 这是一个实时版本,以查看其功能。 https://jsfiddle.net/2f9zsu7d/2/
2回复

无法对齐div内容

我正在使用Vue.js和Bootstrap开发应用程序。 我正在寻找一个文件夹,看起来像这样: 但是,我无法对齐内容以确保其外观如上图所示。 当前图片如下所示: 这是代码: <div class="col-xl-3 col-md-6">
1回复

向右推div的内容

我有一个评论区域,用户可以在其中评论和回复评论。 我想显示评论及其回复。 问题是答复与父注释不正确对齐。 的jsfiddle CSS 当前结果: 。 这就是我想要的
1回复

jQuery替换div内容

我正在玩Bootstrap模式,我想在单击按钮时更改div的内容。 这是代码: 模态内容的html代码 css造型 javascript函数隐藏/显示div 当用户点击注册按钮时,登录表单div隐藏并注册框显示。我无法使此代码工作(当用户单击注册按钮时,注册div
5回复

在中间对齐div内容

如何在中间显示标题,描述和表格? HTML: CSS:
1回复

内容在div中崩溃

我在用html裁剪内容时遇到问题。 我不知道如何清楚地解释这一点,所以我会告诉你我的意思。 例如我有两个股利: 我希望图像的高度相同,而与内容量无关,但它们看起来像这样: 图像的位置以某种方式取决于内容量。 我在第二个分区没有看到任何填充或边距