- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经向 Jumbotron 添加了一个“特殊”类,以保持 Jumbotron 的高度为用户浏览器窗口的 100%(无论大小)。
然而,当我将此类应用于超大屏幕 (greenpromobox) 中的 div
时,它位于我的标题之上,因此隐藏了 H1
标题(位于超大屏幕)在移动设备上。
有什么解决方案吗?
实时链接: http://185.123.96.102/~kidsdrum/moneynest.co.uk
HTML
<div class="special">
<div class="jumbotron">
<div class="container text-center">
<div class="h1extrapadding hidden-xs hidden-sm"></div>
<h1 class="boldme">Aged 20-30 & frustrated with money?</h1>
<div class="greenpromobox">
<div class="h2extrapadding hidden-xs hidden-sm"></div>
<h2 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> quickly gain control over your finances</h2>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&id=299de51b4e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/hand-drawn-arrow.png" id="handarrow" class="hidden-xs hidden-sm" alt="arrow"><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address" required autofocus>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_9ccf2d2219536b32eaae3c3d1_299de51b4e" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div>
CSS
.special,.special .jumbotron{
height:100%;
width: 100%;
}
最佳答案
关于html - Jumbotron 隐藏 H1 标题的特殊类(class),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35552767/
我正在学习网页设计和 js。在我的网页上,我将 jumbotron h2 中的默认颜色定义为黑色。 .jumbotron h2{ text-align: center; color:b
尝试更改我的 jumbotron 的背景和颜色,但没有任何反应。padding有效,但 background没有。 我的 CSS: .jumbotron { padding:70px 30px
我无法弄清楚为什么我的超大屏幕容器会覆盖整个页面。我正试图让超大屏幕在“找到你的大学”之前停下来。 其次,我也无法将搜索栏移动到超大屏幕的中间。谁能帮忙?我是 HTML、CSS 和 Bootstrap
我正在尝试缩小社交图标之间的间隙/边距,并使其在文本下方居中。 Jumbotron 代码如下: div class="jumbotron"> A blog to explore, learn
这个问题在这里已经有了答案: Bootstrap Jumbotron not becoming full width of Body (7 个答案) How to make a full-widt
Bootstrap Jumbotrons 在我的网站上超出了容器,这意味着移动版本上的导航栏没有填满屏幕。我没有超大屏幕的其他页面不会出现此问题。 我尝试使用卡片代替,但是当我把它放在文本以外的任何东
我制作了这个登陆页面,效果很好。背景图片覆盖了页面,看起来很棒。我离开它,一天后回来,它看起来不一样了。我看不出它的原因。图像根本不会出现在标题的文本后面(检查图片)。
我想将超大屏幕设置为 0.5 不透明度。 En 1
我目前正在使用最新版本的 bootstrap 3.0.0 问题很简单。在 jumbotron 容器中,我使用如何将文本与 Logo 居中对齐 我已经玩了几个小时,使用 col-md-* 并且运气不佳。
我是网络开发的新手,在使用 bootstrap/CSS 时遇到了一些麻烦。我试图在默认 Bootstrap 超大屏幕后面有一个背景图像。最重要的是,我似乎也根本无法显示图像。我有点迷路了。任何帮助将不
我正在尝试将视频嵌入到引导超大屏幕中,但它并没有出现在我目前拥有的代码的任何地方。我错过了什么?
简单的 Bootstrap 超大屏幕... .jumbotron-page { height:300px; } 我需要在移动/小型设备上将高度更改为 100px,所以我明白了...... .jumbo
我正在使用 Bootstrap 为网站创建超大屏幕,但我遇到了超大屏幕无法在小屏幕上正确调整大小的问题。 这是我的代码 HTML
HTML: Toggle navigation
想问一下如何在不影响字体和按钮的不透明度的情况下,改变 Jumbotron 的不透明度使其全宽? .jumbotron-special{ text-align: center; bac
我有一个使用 Bootstrap 3 和 Jumbotron header 的 Wordpress 站点。我对使用 skrollr.js 的导航和背景有视差效果。 我为媒体查询 (768px) 设置了
我正在尝试获取以下代码来为超大屏幕背景加载随机图像,但没有成功。我只是不知道哪一部分是问题所在。超大屏幕本身充当基本 flex slider 的区域。我基本上希望 flex slider 的背景图像在
我在使用 BootStrap 时遇到了 Jumbotrons 的问题。我的页面上有 2 个 div,第二个应该占据剩余的屏幕尺寸。但是当我改变浏览器的高度和宽度时,它并没有相应地调整,因为 div 的
所以我不知道如何让这个 jumbotron div 具有指定的背景图像。以前我在另一个元素中使用它时它起作用了,但是当我将它导入另一个元素时它就停止显示了。其他一切正常,所以我虽然只是忘记了 css
似乎无法弄清楚如何在超大屏幕中使用 CSS 专门放置按钮。我使用了一些类,例如 text-left 或 pull-left,但它们并没有给我想要的外观。我想这是一些简单的 CSS,但我似乎无法理解。我
我是一名优秀的程序员,十分优秀!