html - Bootstrap 列 col-6 显示 block

Question

我想知道应该如何正确地做这个例子:

|col-lg-6 列表项| |col-lg-6 联系表||col-lg-6 列表项| |联系表格 ||col-lg-6 列表项| |联系表结束 |

为了描述示例，我想放置可能是 3 个列表项高度的触点(不要拘泥于固定尺寸)我不明白的主要是如何正确放置表单。

enter image description here

我在想:

<div class="col-lg-6 list-item"></div> <div class="col-lg-6 contact-form"></div>
<div class="col-lg-6 list-item"></div>
<div class="col-lg-6 list-item"></div>

但这根本行不通，因为 col-lg-6 的其余部分将内联，并且联系表会以某种方式被破坏。

Answer 1

您要做的是嵌套列，例如，

<div class="col-lg-12">
    <div class="col-lg-6">
        <div class="col-lg-12 list-item"></div>
        <div class="col-lg-12 list-item"></div>
        <div class="col-lg-12 list-item"></div>  
    </div>
    <div class="col-lg-6 contact-form"></div>
</div>

这样做将允许 contact-form div 中的内容拉伸(stretch)，而不会弄乱 list items