更改屏幕尺寸时,使用超大屏幕的文本和图像会失真 [英] Text and images with jumbotron get distorted when changing screen sizes
问题描述
今天我已经使用引导程序3制作了一个网页,我已经更改了'jumbroton'编码,使其看起来像这样: http://www.bootply.com/103783
Today i have made a webpage using bootstrap 3, i have change the 'jumbroton' coding to make it look like this: http://www.bootply.com/103783
虽然背景图片显示完整,但是当我调整其大小时,页面却没有
Although the background image shows through, but when i resize it the page doesn't not resize but instead puts the text and image within the 'jumbotron' underneath something else.
我尝试将容器放在巨型周围,但是没有运气。 。:(
I have tried putting a 'container' around the'jumbotron' with no luck... :(
我的网站: http:// warfacecommunity。 bugs3.com/
尝试滚动,您将看到我的意思!
Try scrolling in and you will see what i meant!
< $>
CSS code in 'style.css'
.bg {
background: url('/img/BG.jpg') no-repeat center center !important;
position: fixed !important;
width: 100% !important;
height: 350px !important; /*same height as jumbotron */
top:0 !important;
left:0 !important;
z-index: -1 !important;
}
.jumbotron {
margin-bottom: 40px !important;
height: 350px !important;
color: white !important;
text-shadow: black 0.1em 0.3em 0.3em !important;
background:transparent !important;
HTML'Jumbotron'
HTML 'Jumbotron'
<div class="jumbotron">
<img src="./img/the-blue-tick-md.png" alt=" " vspace="20" class="pull-right" class="img-responsive"/>
<h1>
Hello, world!
</h1>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a> <a class="btn btn-primary btn-large" href="#">Extras</a>
</p>
</div>
推荐答案
您非常亲密,
您应该将其分为两部分。并为最大宽度添加jumbotronwidth类,以使其具有响应性
you should divide this in to two parts. and add the jumbotronwidth class for max-width to make it responsive
<div class="jumbotron">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right ">
<img vspace="20" class="jumbotronwidth" alt=" " src="./img/the-blue-tick-md.png">
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<h1>
Hello, world!
</h1>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a> <a class="btn btn-primary btn-large" href="#">Extras</a>
</p>
</div></div>
css
.jumbotronwidth
{
max-width:100%;
}
这篇关于更改屏幕尺寸时,使用超大屏幕的文本和图像会失真的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!