Question

我非常喜欢靴带。所以我想我会设置一个小的＃34;形式＆＃34;看看我是否可以让它流动，我做了一个绝对可怕的工作。即使在最大的设置中，我也试图将内容分成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列中居中：{{3 }}

引导格式没有意义

1 个答案: