Css 响应行高度问题

我有个问题。请将窗口从XS调整为LG以查看问题

在LG模式下，一切都很好。 在XS模式下，一切正常

最后一组面板上的MD模式不好。我原以为面板3会低于面板1，即使它会稍微降低一点

我不能使2不同，因为它会打破LG屏幕的逻辑

---

这可能吗？

您需要另一个包装器，类似这样的：

      <div class="container">
        <h2>Obvious Behavior</h2>
        <div class="row">
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">Title1</div>
              <div class="panel-body">Content here1..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">Title2</div>
              <div class="panel-body">Content here2..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">Title3</div>
              <div class="panel-body">Content here3..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">Title4</div>
              <div class="panel-body">Content here4..</div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <h2>Desired Behavior</h2>
        <div class="row">
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-primary">
              <div class="panel-heading">Title1</div>
              <div class="panel-body">Content here1..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-primary">
              <div class="panel-heading">Title2</div>
              <div class="panel-body">Content here2..<br>Content here2..<br>Content here2..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-primary">
              <div class="panel-heading">Title3</div>
              <div class="panel-body">Content here3..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-primary">
              <div class="panel-heading">Title4</div>
              <div class="panel-body">Content here4..</div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <h2>Bad Behavior</h2>
        <div class="row">

          <div class="col-lg-6 col-md-12">
            <div class="col-lg-6 col-md-6 col-xs-12">
              <div class="panel panel-success">
                <div class="panel-heading">Title1</div>
                <div class="panel-body">Content here1..<br>Content here1..<br>Content here1..</div>
              </div>
            </div>

            <div class="col-lg-6 col-md-6 col-xs-12">
              <div class="panel panel-success">
                <div class="panel-heading">Title2</div>
                <div class="panel-body">Content here2..</div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-12">
            <div class="col-lg-6 col-md-6 col-xs-12">
              <div class="panel panel-success">
                <div class="panel-heading">Title3</div>
                <div class="panel-body">Content here3..</div>
              </div>
            </div>

            <div class="col-lg-6 col-md-6 col-xs-12">
              <div class="panel panel-success">
                <div class="panel-heading">Title4</div>
                <div class="panel-body">Content here4..</div>
              </div>
            </div>
          </div>

        </div>
      </div>

明显的行为
标题1
内容如下1。。
标题2
内容如下2。。
标题3
内容如下3。。
标题4
内容如下4。。
期望行为
标题1
内容如下1。。
标题2
此处内容2..
此处内容2..
此处内容2。。
标题3
内容如下3。。
标题4
内容如下4。。
不良行为
标题1
此处内容1..
此处内容1..
此处内容1。。
标题2
内容如下2。。
标题3
内容如下3。。
标题4
内容如下4。。

---

你能发布截图吗？