Question

这是我遇到的问题。请将窗口从XS调整为LG以查看问题。

http://www.bootply.com/ViRGDgxLoQ

在LG模式中，每个人都很好。在XS模式下，每个人都很好。

在最后一组面板上，MD模式并不好。我期待面板3低于面板1，即使它降低了一点。

我不能做出两种不同的做法，因为它会破坏LG屏幕的逻辑。

这可能吗？

Answer 1

你需要另一个包装器，如下所示：

      <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>

Forked your code

响应行高度问题

1 个答案: