html - 使用 Bootstrap 在移动/桌面上进行另一个 View /订单的最佳实践

Question

我正在使用 Bootstrap 4(在 Angular 5 之上)开发一个仪表板。 现在我无法解决以下问题:

假设我的桌面上有以下 View 。 我简化了代码以使其更具可读性。这些卡片确实包含更多 div，例如卡片标题等等，并且放置在 Angular 组件中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-9">
      <div class="card"  style="height: 300px"> 
        card1
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card"  style="height: 150px">
        card2
      </div>
      <div class="card"  style="height: 150px">
        card3
    </div>
  </div>
</div>

您可以看到这两个列很好地放置在“更大”卡片的右侧(请参阅桌面上的“整页”)。现在在移动设备(和纵向平板电脑)上，'card2' 和 'card3' 彼此放置，但我希望它们彼此相邻。

我可以通过仅为移动设备生成一个新 View 来做到这一点，但我认为这可以更容易地完成，所以我没有任何代码重复。但我只是不知道如何做!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <div class="container-fluid">
      <div class="row">
        <div class="col-12 col-md-9">
          <div class="card"  style="height: 300px"> 
            card1
          </div>
        </div>
        <div class="col-md-3 d-none d-md-block">
          <div class="card"  style="height: 150px">
            card2
          </div>
          <div class="card"  style="height: 150px">
            card3
          </div>
        </div>
        <div class="col-6 d-none d-block d-md-none">
          <div class="card"  style="height: 150px">
            card2
          </div>
        </div>
        <div class="col-6 d-none d-block d-md-none">
          <div class="card"  style="height: 150px">
            card3
        </div>
      </div>
    </div>

有人知道如何以更简洁的方式做到这一点吗？ 我还尝试将卡片放在它们自己的行的右侧，但这会产生相同的行为。

Answer 1

您可以将卡片 2 和卡片 3 嵌套在另一个 rowcol 中，无需重复标记。

https://www.codeply.com/go/AF4sManetn

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-9">
            <div class="card" style="height: 300px">
                card1
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="row">
                <div class="col-6 col-md-12">
                    <div class="card" style="height: 150px">
                        card2
                    </div>
                </div>
                <div class="col-6 col-md-12">
                    <div class="card" style="height: 150px">
                        card3
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>