本文介绍了(Bootstrap 3)改变屏幕尺寸时,jumbotron的文本和图像会变形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

今天我使用bootstrap 3做了一个网页,我改变了'jumbroton'编码,使它看起来像这样:



虽然背景图片显示通过,但当我调整大小时,页面不会调整大小



我试图在'jumbotron'周围放置一个'容器'没有运气... :(



我的网站:



尝试卷动,您会看到我的意思!



中的CSS代码 背景:url('/ img / BG.jpg')no-repeat center center!important;
position:fixed!important;
width:100%!important;
height:350px!重要; / *与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' >

 < div class =jumbotron> 
< img src =./ img / the-blue-tick-md.pngalt =vspace =20class =pull-rightclass =img-responsive/&
< h1>
你好,世界!
< / h1>

< p>
这是一个简单的营销或信息网站的模板。它包括一个大的标注称为英雄单位和三个支持的内容。使用它作为一个起点创造更独特的东西。
< / p>
< p>
< a class =btn btn-primary btn-largehref =#>了解详情< / a>& nbsp;< a class =btn btn-primary btn-large =#>额外< / a>
< / p>
< / div>


解决方案

您很近,



你应该把它分成两部分。并添加max-width的jumbotronwidth类以使其响应

 < div class =jumbotron> 
< div class =col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right>
< img vspace =20class =jumbotronwidthalt =src =。/ img / the-blue-tick-md.png>
< / div>
< div class =col-xs-8 col-sm-8 col-md-8 col-lg-8>
< h1>
你好,世界!
< / h1>

< p>
这是一个简单的营销或信息网站的模板。它包括一个大的标注称为英雄单位和三个支持的内容。使用它作为一个起点创造更独特的东西。
< / p>
< p>
< a class =btn btn-primary btn-largehref =#>了解详情< / a>& nbsp;< a class =btn btn-primary btn-large =#>额外< / a>
< / p>
< / div>< / div>

css

  .jumbotronwidth 
{
max-width:100%;
}


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... :(

My website: 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'

<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>&nbsp;<a class="btn btn-primary btn-large" href="#">Extras</a>
                </p>
            </div>
解决方案

You are very close,

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>&nbsp;<a class="btn btn-primary btn-large" href="#">Extras</a>
                </p>
            </div></div>

css

.jumbotronwidth
{
max-width:100%;
}

这篇关于(Bootstrap 3)改变屏幕尺寸时,jumbotron的文本和图像会变形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-16 00:28