Bootstrap中col-lg-6面板错位求助：两面板无法并排显示

嘿，我看你刚接触Bootstrap，想用col-lg-6实现左右两个区块并排，结果加了图片后就变成上下堆叠了对吧？别着急，我帮你揪出问题所在，一步步解决～

问题根源分析 #

我仔细看了你的代码，发现两个关键问题：

1. img标签未闭合：你的图片标签写成了<img class="img-responsive" src="images/warning.png"，缺少闭合的/>，这会直接导致HTML结构错乱，Bootstrap的栅格布局依赖完整正确的DOM结构，结构出错后布局自然会乱掉。
2. 多余的闭合标签：代码末尾多了一个</div>，这也会破坏整体的容器结构。

另外补充一点：col-lg-6仅在屏幕宽度≥1200px的大屏幕下生效，如果你的测试屏幕尺寸小于这个值，两个区块本来就会自动堆叠，要是想在中屏、小屏也保持并排，可以额外添加col-md-6、col-sm-6这类响应式类。

修正后的完整代码 #

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-6">
      <h2>Lastest News</h2>
      <p>Article</p>
      <div class="panel panel-default">
        <div class="panel-heading">Panel Header</div>
        <div class="panel-body">
          <img class="img-responsive" src="images/warning.png" />
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6">
      <form action="/action_page.php">
        <h2>Buy, Sell and more deals!</h2>
        <div class="form-group">
          <label for="email">Email address:</label>
          <input type="email" class="form-control" id="email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
        <ul class="nav navbar-nav navbar-center">
          <li>
            <button class="navbutton"> Login </button>
          </li>
          <li>
            <p> Not with us yet? </p>
          </li>
          <li>
            <button class="navbutton"> Sign Up </button>
          </li>
        </ul>
      </form>
    </div>
  </div>
</div>

额外优化建议 #

• 给col类补充col-md-6，这样在中等屏幕（≥992px）下也能保持并排布局，适配更多设备；
• 如果图片还是有撑破容器的情况，可以给图片添加max-width: 100%;的样式（不过img-responsive已经包含这个属性，一般不用额外加）；
• 检查你的Bootstrap CSS是否正确引入，确保栅格系统的样式能正常生效。

内容的提问来源于stack exchange，提问作者icycheesecake