twitter-bootstrap - 使用 BS4 将卡片左右排列，无需父列

Question

使用 Bootstrap 4 且不使用 Javascript，当视口(viewport)很大时，如何创建这样的排列:

当视口(viewport)受到约束时，这样的安排:

我可以让它看起来像大视口(viewport)排列的唯一方法是这样做:

<div class="row justify-content-center">

  <div class="col-8 column-1">

    <form class="card text-center" action="runthis" method="GET">
      <div class="card-header">Hello</div>
      <div class="card-block">
        <input type="text" class="form-control input-lg" name="full_name" placeholder="Full Name" autofocus="" />
        <input type="text" class="form-control input-lg" name="full_name2" placeholder="Full Name/>
        <input type=" text " class="form-control input-lg " name="full_name3 " placeholder="Name " />
        <button name="Submit " value"submit " class="btn btn-primary ">Submit</button>
      </div>
    </form>

  </div> <!-- end column-1 -->

  <div class="col-4 column-2">
    <div class="card p-3">
      <blockquote class="card-block card-blockquote">
        <h4 class="card-title ">Card title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      </blockquote>
    </div>
    <div class="card">
      <div class="card-block ">
        <h4 class="card-title ">Card title 2</h4>
        <p class="card-text ">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text "><small class="text-muted ">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

您可以在 https://codepen.io/anon/pen/ZKoPWx 处查看此代码的实际运行情况。

正如您从上面的代码中看到的，当视口(viewport)由于左右部分的父列而受到约束时，它不允许根据需要折叠。

如果没有父列，我该如何做到这一点？

Answer 1

使用新的 BS 4 实用程序类在更大的屏幕上相应地 float 列。然后它们将在较小的 (xs) 屏幕上按自然顺序堆叠。

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

<div class="container-fluid">
    <div class="row d-block">
        <div class="col-sm-4 float-sm-right">
            <div class="card p-3">
                card 2
            </div>
        </div>
        <div class="col-sm-8 float-sm-left">
            <form class="card text-center" action="runthis" method="GET">
               card 1
            </form>
        </div>
        <div class="col-sm-4 float-sm-left">
            <div class="card">
                <div class="card-block ">
                    card 3
                </div>
            </div>
        </div>
    </div>
</div>