Question

我希望我的表单字段在桌面和平板电脑上的放置方式不同。就目前而言，桌面上的一切都很好。我有两个类似的案例。在第一个中，我有类似的东西（输入字段在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行只有一个字段，我想有两个。我应该只使用一个＆＃34; row＆＃34;而不是2，并使用空＆＃34; col-md-3＆＃34;在桌面上有一个＆＃34;行＆＃34;跨越多条线？

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

<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>

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

由于

Answer 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>

Answer 2

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

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

来自Bootstrap文档：

＆＃34;如果在一行中放置超过12列，则每组额外列将作为一个单元包裹到新行上＃34;

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

在多条线上的Boostrap行

2 个答案: