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

【问题标题】：Fix position of responsive image in responsive header, next to text修复响应式标题中响应式图像在文本旁边的位置
【发布时间】：2015-10-22 03:10:34
【问题描述】：

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

这是我目前所拥有的，但这不是解决方案。我很感激任何建议。

  <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>

【问题讨论】：

你有一个例子说明它应该是什么样子以及它应该如何表现？我无法在脑海中想象这一点
用图片更新了问题。我希望这会有所帮助。
那么在小型设备上会发生什么？文本和按钮在上面，图像在下面？ iPhone是图像元素？因此，即使在小型设备上，您也希望 iPhone 保持在文本的右侧？
正确。这对 iPhone 来说不是那么重要，因为无论如何我很可能最终会将手机的图像隐藏在那里。但在 iPad 上，它们仍然应该坐在一起。
也许使用 col-xs-6 而不是 col-md-6 并添加媒体查询以在较小的屏幕上降低字体大小？

标签： html css twitter-bootstrap responsive-design

【解决方案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%;
}

【讨论】：