Question

这个想法是有一个带有文本和图像元素的响应头，它位于固定的背景图像上。我已尝试使用bootstrap列执行此操作，这些列可在桌面上按照我想要的方式运行。然而，在较小的设备上，引导媒体查询完全按照它们应该执行的操作，并将列拆分为彼此下方显示。我对此没有想法。我知道我需要以某种方式修复图像元素以始终保持在容器的底端，但由于整个事情都是响应式的，我不知道如何实现它。

这是我到目前为止所做的，但这不是解决方案。我很感激任何建议。

  <section class="section swatch-black section-text-shadow section-inner-shadow">
    <div class="background-media" style="background-image: url('http://some-url.com/home-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment:fixed; background-position: 50% 60%;"> </div>
    <div class="container">
      <div class="row">
        <div class="col-md-6 text-left element-normal-top element-normal-bottom">
            <h1 class="bigger hairline bordered-normal element-tall-top"> Header Text<br>
              <strong>More Text </strong> </h1>
            <p class="lead"> Even more text </p>
          <a href="someurl.html" class="scroll-to-id btn btn-link btn-lg element-no-top element-normal-bottom"> learn more </a>
          <a href="someurl.html" class="scroll-to-id btn btn-link btn-lg element-no-top element-normal-bottom"> contact us </a> </div>
          <div class="col-md-6 text-right">
          <img src="assets/images/uploads/test.png" style="position:relative; right: 0px; bottom: 0px; top: 150px;">
          </div>
      </div>
    </div>
  </section>

Answer 1

您可以设置自己的列结构。这是我为你快速制作的一个例子： http://jsfiddle.net/97wswqvr/

这显然需要更多的工作，这取决于你的标题文本/按钮等的其余部分......但它是一个好的起点

html

<header>
    <div class='content col col-1-2'>
        <div>
            text text text
        </div>
        <div>
            text text text
        </div>
        <div>
            text text text
        </div>
    </div>
    <div class='col col-1-2 img'>
        <img class='col' src='http://store.storeimages.cdn-apple.com/8459/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/compare/iphone-compare-bbh-201411?wid=254&hei=210&fmt=png-alpha&qlt=95&.v=1416449205305'/>
    </div>
</header>

CSS

html,body {
    margin: 0;

}
header {
    background-image: url(http://wowslider.com/sliders/demo-85/data1/images/southtyrol350698.jpg);
    text-align: center;
}
.content {
    color: white;
    padding: 40px 0;
}
.col {
    display: inline-block;
    vertical-align: middle;
}
.col-1-2 {
    width: 45%;
}
.img {
}
img {
    width: 70%;
}

修复响应式图像在文本旁边的响应式标题中的位置

1 个答案: