多行上的 Boostrap 行 [英] Boostrap row on multiple lines

问题描述

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

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

它在平板电脑上看起来不错，但不是在第 3 行和第 6 行只有一个字段，我想要两个.我是否应该只使用一个行"而不是 2 个，并在桌面上使用空的col-md-3"以使单个行"跨越多行?

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

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

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

我希望前两个字段在同一行上.

谢谢

解决方案

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

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

来自 Bootstrap 文档:

<块引用>

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

文档中还有演示列包装的示例.请记住，如果列的高度不同，您可能需要使用响应式重置.

I would like the fields of my form to be placed differently on desktop and on tablet. For now, everything is fine on desktop. I have two similar cases. In the first one, I have something like this (the input fields are in the div's) :

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

It doesn't look bad on tablets, but instead of having only one field in the 3rd and 6th rows, I would like to have two. Should I use just one "row" instead of 2, and use empty "col-md-3" 's on desktop in order to have a single "row" going across multiple lines?

In the end I have a similar case :

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

I would like the two first fields to be on the same line.

Thanks

解决方案

Yes, put them all in a single .row element. This is known as column wrapping.

Demo: http://www.codeply.com/go/7mUSsbO8od

From the Bootstrap docs:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

There are also examples in the docs that demonstrate column wrapping. Just remember you may need to use responsive resets, if the columns vary in height.

这篇关于多行上的 Boostrap 行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！