Question

今天我使用bootstrap 3创建了一个网页，我更改了'jumbroton'编码，使其看起来像这样：http://www.bootply.com/103783

虽然背景图片显示通过，但是当我调整大小时，页面不会调整大小，而是将文本和图像放在“jumbotron”下面的其他内容中。

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

我的网站：http://warfacecommunity.bugs3.com/

尝试滚动，你会看到我的意思！

'style.css'中的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>

Answer 1

你很亲密，

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

<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的文本和图像会失真

1 个答案: