角图像，页脚。引导

Question

我需要些帮助。我需要在页脚自适应图像，并把图片放在右边的角落。图片尺寸为:150x150px。

<footer>
  <div class="container">
    <p class="text-xs-center"> TEXT TEXT TEXT<br>
    text text text<br>
    <a href="</a> </p>
  </div>
</footer>

footer {
    position: absolute;
    width: 100%;
    height: 150px;
    background-color: rgb(50, 50, 50);
}

我请求你用一些代码来帮助我。使用我的旧代码-是600 x 1024显示的糟糕的responsive.On小工具-页脚文本叠加在图像上。

Answer 1

我真的不知道"text-right“是不是一个真正的引导类...然而，我认为这种布局是可行的。

​

footer {
    width: 100%;
    height: 150px;
}

<footer>
  <div class="container">
    <p class="text-xs-center"> TEXT TEXT TEXT<br>
    text text text<br>
    <a href=""></a> </p>
    <p class="text-right"><img scr="YOUR IMAGE PATH HERE" /></p>
  </div>
</footer>

​

Answer 2

在img标签中应该提到类"pull-right“。此外，bootstrap col类可以用来并排放置文本和图像。代码如下：

HTML

​

footer {
  width: 100%;
  height: 150px;
  background-color: rgb(50, 50, 50);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
  <div class="container ">
    <div class="col-sm-6 col-md-6 col-xs-6">
      <p class="text-xs-center text-danger"> TEXT TEXT TEXT<br> text text text<br>
        <a href="">Link</a>
      </p>
    </div>

    <div class="col-sm-6 col-md-6 col-xs-6">
      <img src="http://www.fillmurray.com/150/150" alt="image" class="pull-right" /></div>
  </div>
</footer>

​