在不更改背景大小的情况下更改行的顶部值答案

【问题标题】：change top value of a row without any changes on background-size在不更改背景大小的情况下更改行的顶部值
【发布时间】：2017-11-01 17:32:02
【问题描述】：

我有这个代码 sn-p，我有整个身体的背景，我有一个包含一个按钮的行，我想更改它的最高值，因为按钮向下并保持对设备的响应性。背景尺寸为 100% 不起作用，我设置为 1700%，这很奇怪而我的主要问题是前 50% 没有做任何事情

@media only screen and (min-width : 320px) {
  body{
      background: url("../images/background.jpg");
      background-repeat: no-repeat;
      background-size: 100% 1700%;
  }
  .buttonBox{
      /*margin-top: 130%;*/
      text-align: center;
      position: relative;
      top:50%
  }
  .buttonBox button{
      font-size: 4vw;
      width: 100%;
  }
}

<div class="container">
    <div class="row buttonBox">
        <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3">
            <button class="btn btn-success text-center">دانلود و نصب</button>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

为了使 .buttonBox 顶部位置起作用，您需要为其容器元素 .container 赋予固定高度，例如：

.container {
  height: 35px;
}

请注意，top: 50% 将是容器高度的 50%。如果你想让它达到页面高度的 50%，使用 VH 而不是 %

可能会更成功

.buttonBox {
  top: 50vh;
}

【讨论】：