html - 在 BootStrap 中为移动设备上的 Splash Page 安装元素

Question

我正在尝试创建响应式启动页面，但无论我如何操作它，它都没有响应。我主要想做的是在没有边距或填充的情况下调整图像。我想要它类似于 Adele's移动网站。另外，我不确定代码是否干净以及我是否正确命名了类。我创建了一个 codepen所以你可以在那里查看。

 <div class="featurette">
  <img class="featurette-image img-responsive pull-left center-block" src="http://www.placehold.it/400/F84065/000" alt="#">

  <div class="purchase-album">
    <div class="album">
      <img class="img-responsive" src="http://www.placehold.it/200/fa8ca2" />
      <div class="lead">available now:</div>
    </div>
    <div class="space">
    </div>
    <p class="lead text-center available "></p>
    <a href="#" target="_blank">
      <button type="button" class="btn btn-default btn-lg outline" type="submit">iTunes</button>
    </a>

    <a href="#" target="_blank">
      <button class="btn btn-default btn-lg outline" type="submit">loudr</button>
    </a>
  </div>
</div>

<div class="enter">

  <button type="button" class="btn btn-default btn-lg outline" type="submit">
    <a href="#"> enter</a>
  </button>
</div>
</div>

Answer 1

Adeles 页面是背景图片，内容显示在顶部。

您可以通过多种方式实现这一目标。

尝试使用它并尝试使用 CSS 将所有内容放在所需的位置。

codepen here example

<header>
<div class="overlay">
    <div class="header-content">
        <div class="header-content-inner">
                    <h1>Your image here</h1>
            <p>buttons here etc</p>
        </div>
    </div>
</div>

缩小页面以查看响应能力