【发布时间】:2016-12-21 08:21:35
【问题描述】:
大家!我目前正在为我的一个朋友做一些免费的工作,为我的作品集做出贡献并让我继续学习。
一切都很好,看起来很棒,但不幸的是,我在尝试使某些内容具有响应性时遇到了很多麻烦。我正在使用 Bootstrap 网格框架。
好的,这是我的背景 CSS,它也需要响应式。
.boxmain {
background-color: white;
width: 100%;
height: 400px;
background-size: cover;
max-width: 100%
}
这是我创建的一个白色框,有点像覆盖我的主背景图像的子背景。
}
.video {
padding-top: 30px;
}
.underh {
font-family: 'Oxygen', sans-serif;
font-weight: 100;
font-size: 22px;
padding-top: 33px;
margin-left: 20px;
max-width: 100%;
}
这是框内内容的 CSS,它是一个段落和嵌入的 Facebook 视频。
<div class="boxmain">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="video">
</div>
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro%2Fvideos%2F638067739703491%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</div>
</div>
<div class="col-xs-6">
<p class="underh">Eye of the Storm Productions is an entertainment business dedicated to its involvement in the electronic music scene.
We offer a large range of services to the underground electronic music scene and pride ourselves on the work that we do.
We offer our own selection of the best aspiring young DJs/Producers and photographers/cinematographers, as well as professionally run stage management solutions.
We have also partnered with Fulcrum Designs and Staging, to bring you the best in stage design and construction. Including custom shade sail installation and VJ services.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
这就是 HTML。 我想学习如何使这个移动友好/响应式谢谢!
【问题讨论】:
-
这不是完整的 html 对吗?我敢打赌这是你的第一篇文章。
-
我只放了必要的东西?
-
首先,我看到你的代码是自举的,它应该是响应式的。我认为你在 html 头或脚本中遗漏了一些东西。
标签: html css twitter-bootstrap mobile