html - Bootstrap 可以做些什么来防止网站内容在更宽的浏览器宽度下移动？

Question

我正在尝试使用 bootstrap 构建一个非常简单的网页。

我可以让所有内容在常规​​宽度的浏览器上看起来都是正确的，但是当我在 Chrome 的宽屏显示器上全屏显示时，所有文本和按钮都在右边困惑。无论我做什么，我似乎都无法避免这个问题。是否有解决方案或 Bootstrap 无法在宽屏上工作？ (我 100% 同意左右两侧有空白，我只是想避免在将浏览器拉伸(stretch)到更宽的宽度后一切都向右移动。)

<div class="container mark">
        <div class="row">
        <div class="col-lg-offset-1">
        <div class="col-lg-offset-11">
        <h1 class="cover-heading">Company Name</h1>
        <p class="lead">Company Description</p>
        <a href="mailto:email" class="btn btn-lg btn-default">Learn More - Email us</a>
        </p>
      </div>
      </div>          
</div>
</div>

Answer 1

bootstrap 类不需要像您拥有的那样嵌套。您似乎想要占用 12 个 Bootstrap 网格列中的 11 个，仅在大型设备上偏移一列 - 这可以而且应该在相同的 div 上指定。尝试类似的东西:

<div class="container mark">
  <div class="row">
    <div class="col-lg-offset-1 col-lg-11">
        <h1 class="cover-heading">Company Name</h1>
        <p class="lead">Company Description</p>
        <a href="mailto:email" class="btn btn-lg btn-default">Learn More - Email us</a>
    </div>          
  </div>
</div>

Demo

Bootstrap Grid Documentation中有例子