使用引导程序时页面显示水平滚动条答案

【问题标题】：Page is showing horizontal scroll bar while using bootstrap使用引导程序时页面显示水平滚动条
【发布时间】：2017-06-05 20:16:54
【问题描述】：

我正在使用引导程序设计一个页面。我正在使用带有 col-lg-x 类的网格系统划分页面。我使用以下代码分为两部分。

<div class='container'>
  <div class='row'> 
    <div class='col-lg-7'></div>
    <div class='col-lg-5'></div>
  </div>
</div>

我在列内添加了内容并将 box-sizing 设置为 border box 。该页面显示一个水平条。我所知道的引导网格系统将页面分为 12 个相等的列，所以在使用网格系统之后我还是不明白为什么水平条仍然显示？

【问题讨论】：

这可能是因为列内的内容必须大于视口的高度。它与网格系统无关。
你能用上面的代码重现同样的问题吗？
必须是您放在列中的内容，因为它在这里可以正常工作：bootply.com/gp51EVFTeK
你有现场示例或引导链接吗？

标签： html css twitter-bootstrap

【解决方案1】：

您的 CSS 代码似乎与引导 CSS 重叠。因为'.col-lg-7' 和'.col-lg-5' 两个类在1200 像素以下都能很好地响应......所以没有水平或垂直滚动条的机会。

<div class='container'>
  <div class='row'>
    <div class='col-lg-7'>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class='col-lg-5'>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
    </div>
  </div>
</div>

https://jsfiddle.net/ShirishDhotre/0amuqd74/

【讨论】：