Question

在我的Jumbotron中，我想将一些文字固定在Jumbotron的左下角。我有一些max-width＆amp;我认为max-height属性可能是问题所在，但我并不确定。我已经在下面的代码中得到了它，但是当页面调整大小时，文本移出Jumbotron或者定位所有不稳定。

HTML：

<a href="#">
<div class="six">
  <div class="col-sm-4">
  <div class="jumbotron">
  </a>
    <h5>Text</h5>
    </div>
  </div>
</div>

CSS：

    .six .jumbotron
    { background: url("Img") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    min-width: 220px;
    max-width:250px;
    min-height:260px;
    max-height:300px;
    margin: 0 auto;
    margin: 3em auto;
    }

 `  .six .jumbotron > h5{
  position:absolute;
  color:#000;
  left:10px;
  bottom:10px;
  font-size:15px;
}`

Answer 1

这是因为你将H5绝对定位到页面而不是元素，要修复它，请执行以下操作：在此处拼写：https://jsfiddle.net/agc3e3yp/2/

 .jumbotron h5{
 margin-top:90%; 
 left:10px;
 font-size:15px;
 color:#fff;
}

注意文本仍会移动，但这是因为更改屏幕大小时父元素的大小会发生变化。但现在它将保持在盒子里面90％的高度。最好的选择就是将你的文字放在div中并自己设计。

让我知道它适合你：）

如何在Bootstrap Jumbotron中专门定位文本？

1 个答案: