html - Bootstrap 格式化没有意义

Question

我对 Bootstrap 带非常陌生。所以我想我会设置一个小的“表格”，看看我是否能让它流动，但我做了一个非常糟糕的工作。即使在最大的设置中，我也试图将事物分组为 2，并且每行不超过 5 个文本框。当我尝试正确设置它时，我在左右两列之间得到了大量的空间。

我尝试设置标题，但这奇怪地包裹起来，当我尝试设置文本框时，两列之间有大量空间

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <h3>Quick Survey for Professional Research!</h3>
</div>

.我最终得到了一些接近使用的东西

<div class="row">
    <div class="input-group text-center">
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
</div>

但这似乎不是处理文本框组的正确方法，而且它肯定不会让我得到我正在寻找的分组。我已经从我的 ASP.net 代码在 jsfiddle 中设置了一个模型，它可以在 https://jsfiddle.net/5ckoapng/9/ 找到。

在理解我在这里缺少的内容方面，我们将不胜感激。我敢肯定它真的很愚蠢，但我花了大约 2 个小时研究不同的形式或格式，但无法弄清楚。

Answer 1

Bootstrap 是移动优先的——如果一个元素要在所有分辨率下跨越 12 列，那么您只需要一个类:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h3>Quick Survey for Professional Research!</h3>
        </div>
    </div>
</div>

要以 2 个为一组显示表单元素，则需要嵌套列:http://getbootstrap.com/css/#grid-nesting

例如:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <form>
                <div class="row">
                    <div class="col-xs-6">
                        #form input
                    </div>
                    <div class="col-xs-6">
                        #form input
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

这样，主 100% (col-xs-12) 列中将嵌套 2x 50% (col-xs-6) 宽度的列。我没有添加表单样式或类，因为这些都可以在文档中轻松获得:http://getbootstrap.com/css/#forms

如果您希望使用 5 个嵌套列，那么您可以利用偏移类将 5x col-xs-2 列推高 1，这样它们看起来就在主 col-xs-12 列的中心:http://getbootstrap.com/css/#grid-offsetting