多行上的引导行

Posted 2023-03-06

【中文标题】多行上的引导行

【英文标题】：Boostrap row on multiple lines

【发布时间】：2017-08-09 22:57:57

【问题描述】：

我希望我的表单字段在台式机和平板电脑上以不同的方式放置。目前，桌面上的一切都很好。我有两个类似的案例。在第一个中，我有这样的东西（输入字段在 div 中）：

<div class="row">
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
</div>

在平板电脑上看起来不错，但不是在第 3 行和第 6 行只有一个字段，我想有两个。我应该只使用一个“行”而不是 2 个，并在桌面上使用空的“col-md-3”，以便让一个“行”跨越多行吗？

最后我有一个类似的案例：

<div class="row">
    <div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-6"></div>
</div>

我希望前两个字段位于同一行。

谢谢

【参考方案1】：

你的意思是这样吗？

<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="col-md-6 col-sm-6"></div>
        <div class="col-md-6 col-sm-6"></div>
        <div class="col-md-12 col-sm-6"></div>
    </div>
</div>

【讨论】：

我没有尝试过，但我认为它不会起作用。只是在顶部有一个 col-md-6 会改变桌面设计。我没有关注。

【参考方案2】：

是的，将它们全部放在一个 .row 元素中。这称为列换行。

演示：http://www.codeply.com/go/7mUSsbO8od

来自 Bootstrap 文档：

“如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行”

文档中还有一些示例可以演示column wrapping。请记住，如果列的高度不同，您可能需要使用响应式重置。