背景图像 Bootstrap 没有全屏

Question

您好，我无法解决使背景图片比容器宽的问题。

当我更改图像的设置时，输入表单会失去垂直居中对齐。

看图应该是怎样的：

.container-table {
  display: table;
  height: calc(100vh - (45px + 35px));
  background: url("http://dummyimage.com/600x400/000/fff") no-repeat;
  background-size: cover;
  background-position: center;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}
.submitbutton {
  border-radius: 0;
  transform: scaleX(-1);
  background-color: #0c8484;
}
.form-control {
  border-radius: 0;
  font-size: 40px;
}
.fa-search {
  color: #e1f0f0;
}

<div class="container container-table">
  <div class="row vertical-center-row ">
    <div class="col-lg-offset-2 col-lg-8">
      <div class="logo">
        <p class="logoname">LOGO</p>
      </div>
      <div class="input-group">
        <input type="text" class="form-control input-lg">
        <span class="input-group-btn">
          <button class="btn btn-lg  submitbutton" type="button">
            <i class="fa fa-search"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以将容器类替换为父 div 中的 container-fluid 类。 改变宽度：100% 可能有副作用..

<div class="container container-table">       /* Original */
<div class="container-fluid container-table"> /* Modified */