Bootstrap CSS样式问题

Question

我在我的页面上创建的动态表单存在问题。

我有一行包含1个或多个长度为4 col的Div。 我希望在经过3次之后，当它达到12次上限时它会向下移动下一次。

看看下面的图片，在我们点击前三个字段后，我认为它会将其他字段移动到他们自己的行。

这里是我的数据所在的HMLT。正如你所看到的，每一行都是它自己的col。

我的格式化方式是否有些错误？ 只是不确定还有什么尝试。

Answer 1

我相信为页面上的每一行创建一个.row是合适的：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Answer 2

我昨天遇到了同样的问题，我发现容器应该指定col长度以解决问题。

我还发现添加其他div以更好地修复字段长度很有用。

我的例子：

 <div class="form-group col-md-12"> <div class="row"> <div class="form-group col-md-3"> your label data </div> <div class="form-group col-md-4"> your input data </div> </div> <div class="row"> <div class="form-group col-md-2"> your label data </div> <div class="form-group col-md-3"> your input data </div> </div> </div> 

我希望它有所帮助。

Answer 3

很难从屏幕截图中看出来，但是看起来您将整个内容（行，列和某些表单组）包含在span元素内。 尝试使用div代替。

Answer 4

问题： http ： //jsfiddle.net/24doudo0/

这似乎是bootstrap如何处理网格包装的问题 。 它没有像我们想的那样处理得很好。 我可以想到这个问题的两个解决方案。 第一种是在后端循环遍历每个第三列后插入行。 为此，您可以使用模数运算符。 我不知道您使用的是哪种后端语言，但是我会用PHP来说明这种方法，因为我很懒。

让我们假设你有一个输入名称数组，你想循环并为每个输入名称创建列。

<div class="row">
    <? foreach ($inputs as $count => $name) : ?>
    <div class="col-md-4">
        <input type="text" name="<?=$name?>">
    </div>
        <? if (($count + 1) % 3 == 0) : // $count is 0 based.  We need an index that starts at 1 so that we don't trigger a new row on the first loop (0 / 3 = 0 which is a remainder of 0) ?>
</div>
<div class="row">
        <? endif; ?>
    <? endforeach; ?>
</div>

其他解决方案是基于CSS的解决方案。 非常简单，但仅适用于CSS3，因此在IE 8或更低版本中将无法使用。 这种方法只是在每隔三列后清除浮点数。 此处的演示： http : //jsfiddle.net/j0dtng4t/

[class*="col-"] {
    background: #C55;
    border: 1px solid white;
    color: white;
}

[class*="col-"]:nth-of-type(3n + 1) {
    clear:left;
}

Answer 5

实际上，至少还有其他两种替代解决方案可以在不添加行div的情况下考虑。

首先是为所有.col*元素增加高度，这样，它们将逐渐得到排序，并在彼此不匹配时堆叠。 （检出笔） 。

第二种是在包含.col*元素的div上使用display flex; 它不是一个引导功能，但它似乎很好地适应了你的情况。

在我制作的笔中，我修改了col-*选择器，但建议您使用一个新的选择器，以免使Bootstrap的网格样式混乱。

Answer 6

尤其是在自举网格中，浮子的工作方式似乎有些混乱。

这是一段简单的代码，演示浮点如何工作

 .container-fluid {min-width:638px;} .container-fluid p{margin:0;font-size:1.2rem} [class*="col-"] { background: #C55; border: 1px solid white; color: white; } 

 <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4"> column 1 <p>we work because we are the same height</p> </div> <div class="col-xs-4"> column 2 <p>we work because we are the same height</p> </div> <div class="col-xs-4"> column 3 <p>we work because we are the same height</p> </div> <div class="col-xs-4"> column 1 </div> <div class="col-xs-4"> column 2 <p>I'm tall, but my buddies aren't</p> </div> <div class="col-xs-4"> column 3 </div> <div class="col-xs-4"> column 3 </div> <div class="col-xs-4"> column 1 </div> <div class="col-xs-6"> column 2 <p>I'm tall but because Fred is too wide he goes to the far left to fit</p> </div> <div class="col-xs-2"> column 3 </div> <div class="col-xs-4"> Fred column 1 </div> </div> <div class="row"> <div class="col-xs-4"> inputs are taller than select </div> <div class="col-xs-4"> inputs are taller than select </div> <div class="col-xs-4"> selects are smaller </div> <div class="col-xs-4"> <input type="text" placeholder="i'm too tall" /> </div> <div class="col-xs-4"> <input type="text" placeholder="i'm too tall" /> </div> <div class="col-xs-4"> <select><option>i'm shorter</option></select> </div> <div class="col-xs-4">that's why i'm column 3</div> </div> </div>