Question

我有一个已垂直居中的标准Bootstrap网格布局。

但是，在调整窗口大小时，div内容会使窗口溢出，从而使顶部div内容模糊。我该如何预防？

请在此处查看最少的示例：http://jsfiddle.net/8pkubef7/

<div style="width:50%;position:absolute;top:50%;left:25%; transform: translateY(-50%);">
<div class="container">
  <div class="row">
    <div class="col">
    <h1> Header 1  </h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
    <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> 
    <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
    <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
    </div>
  </div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end vertical center div -->

Answer 1

尝试一下：

<div class="container">

 <div class="floating">


  <div class="row">
    <div class="col">
      <h1>
      Header 1
      </h1>
    </div>

  </div>

  <div class="row">
  <div class="col-md-12">
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> 
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
        <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
    </div>
</div>

css：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  word-break: break-all;

}
.container {
    position:relative;
}
.floating {
    float: left;
    position: absolute;
    left:25%;
    right:25%;
    top: 50%;
}

http://jsfiddle.net/c6eyq2rn/

垂直居中的引导程序div调整大小时会溢出窗口-如何防止？

1 个答案: