使用 BS4 在没有父列的情况下左右排列卡片
Arrange cards on left and right using BS4, without having parent columns
使用 Bootstrap 4 而没有 Javascript,当视口很大时,如何创建这样的排列:
当视口受限时,这样的安排:
我让它看起来像大视口排列的唯一方法是这样做:
<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
查看此代码的运行情况
从上面的代码可以看出,当视口由于左右部分的父列而受到限制时,它不允许按需折叠的能力。
没有父列怎么办?
使用新的 BS 4 实用程序 类 在较大的屏幕上相应地浮动列。然后它们将在较小的 (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>
使用 Bootstrap 4 而没有 Javascript,当视口很大时,如何创建这样的排列:
当视口受限时,这样的安排:
我让它看起来像大视口排列的唯一方法是这样做:
<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
查看此代码的运行情况从上面的代码可以看出,当视口由于左右部分的父列而受到限制时,它不允许按需折叠的能力。
没有父列怎么办?
使用新的 BS 4 实用程序 类 在较大的屏幕上相应地浮动列。然后它们将在较小的 (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>