css - 背景图像 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 */