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处理grid wrapping的方式有关。它没有像我们想的那样处理得很好。我可以想到这个问题的两个解决方案。第一种是在后端循环遍历每个第三列后插入行。为此，您可以使用模数运算符。我不知道你使用的是哪种后端语言，但我会用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*元素添加高度，这样他们就可以逐步进行排序，并在彼此不相邻时进行堆叠。(checkout the pen)。

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

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

Answer 6

浮动如何工作似乎有些混乱，特别是在自举网格中。

这是一段简单的代码，演示了浮点数的工作原理

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;