Question

第一篇帖子所以我不确定格式是否适用于帖子但是我创建了一个网站作为新手，我让它在桌面上工作但是在移动设备上时，网站的右侧是另一个文本而不是的。有什么想法吗？我无法将侧栏更新显示在我想要的位置。现在的解决方案是在两个左侧div之间添加代码，反过来，当最小化时，stripo会遍历div和以下的div。

我的麻烦是，如果我把div放在代码的末尾，那么div只会出现在最后一个div的旁边，然后才会下降。该网站是http://clinicalresearch-apps.com/index.html。谢谢。

HTML代码

 <div class="col-md-5">
    <br>
    <div class="navigation">
        Center for Biostatistics Updates
        <br>
        <div class="my-text">
            <p><font size="4"> Application cycle open for our Center for Biostatistics-sponsored 1-year MS in Biostatistics Program in Theory and
                Methods! Learn more here
            <br>
            <p><font size="4">Apply now for our Center for Biostatistics-sponsored 1-year MS in Biostatistics
                Program in Clinical Applications geared specifically for clinically-trained professionals! Learn more here
        </div>
    </div>
</div>

CSS代码

.navigation
    {
        position:absolute;
        left: 20px;
        padding-left: 10PX;
        background-color:#221f72;
        opacity: .9;
        width:502px;
        height:745px;
        color:white;
    }

Answer 1

首先让我说好工作，以创建网站作为新手，很多评论你可以做得更好但开始很棒，每个人都从某个地方开始。

你有两个主要问题：
1）您的班级＆＃34;导航＆＃34;导致其当前规则出现问题 2）您没有正确使用bootstrap html / css。

首先将您的课程更新为以下内容：

.navigation {
    background-color: #221f72;
    opacity: .9;
    width: 100%;
    height: auto;
    color: white;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
}

删除position : absolute解决了很多问题，让元素自然流动。

为您的视频iframe添加此内容，尤其是移动设备：

.navigation iframe { width: 100%; }

接下来，由于您已经在使用bootstrap，因此请正确使用它。 Bootstrap指定您应该将列放在行内，将行放在容器内。您有列和容器，但不是列周围的行！

您似乎希望主列为col-md-7，右侧/侧栏为col-md-5，并使用<div class="row"></div>围绕这两列，然后查看您获得的内容。请务必参阅文档：https://getbootstrap.com/docs/3.3/css/#grid

Answer 2

使用媒体屏幕，您可以通过其宽度大小控制它。使位置相对而不是绝对

重做div

2 个答案: