html - Bootstrap 网格布局 : inputs expand 100% width at the halfway point

Question

所以我正在尝试使用 Bootstrap 网格创建一个简单的响应式表单，但这对我来说非常棘手。您可以忽略我发布的大部分内容(初学者的 coldfusion 是多余的)但要注意网格类!

<div id="custom-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1>Create Definitions</h1>
            <div style="#display#" class="error-box alert alert-#alert#">#alertMsg#</div>
        </div>
        <!-- /.col-lg-12 -->
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-10">
                            <form class="form-horizontal" id="addDef" action="index.cfm?group=#URL.group#" method="POST">
                                <div class="form-group"> <!--- state select --->
                                    <label for="state" class="col-lg-3 control-label">Assign to State:</label>
                                    <div class="col-lg-7">
                                        <select id="states" name="states" class="form-control">
                                            <cfloop query="state">
                                                <option value="#state.ID#" name="state">#state.StateName#</option>
                                            </cfloop>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group"> <!--- state select --->
                                    <label for="sluglist" class="col-lg-3 control-label">Assign to Question:</label>
                                    <div class="col-lg-7">
                                        <select id="slugList" name="slugs" class="form-control">
                                            <option selected>--- Choose a Slug ---</option>
                                            <cfloop query="questions">
                                                <option value="#questions.ID#" name="state">#questions.slug#</option>
                                            </cfloop>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group" id="xhrHidden" style="display:none"> <!--- question text --->
                                    <label for="term" class="col-lg-3 control-label">Question Text:</label>
                                    <div class="col-lg-7">
                                        <span id="questionText"></span>
                                    </div>
                                </div>
                                <div class="form-group"> <!--- rich text div for definition --->
                                    <label for="term" class="col-lg-3 control-label">Text Entry:</label>
                                    <div class="col-lg-7">
                                        <textarea name="term" id="term"></textarea>
                                        <div>Define a term or phrase on a state by state basis.</div>
                                    </div>
                                </div>
                                <div class="form-group"> <!--- group select --->
                                    <label for="state" class="col-lg-3 control-label">Group: #group.GroupName#</label>
                                    <div class="col-lg-7">
                                        <div>#group.GroupName#</div>
                                    </div>
                                </div>
                                <div class="form-group"> <!--- submit button --->
                                    <label for="submit" class="col-lg-3 control-label"></label>
                                    <div class="col-lg-7">
                                        <input type="submit" class="btn btn-primary" id="submitbutton" value="Create Definition" />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

发生的事情是它们开始时大约是屏幕尺寸的一半，当您缩小浏览器时，网格会缩小，然后突然，在大约 50% 时，输入扩展到看起来像 100% 的宽度，然后下一个媒体查询开始，它进入正常大小。

有人能解释一下为什么我的网格会在大约一半的时候扩展吗？

基本上，我在使用网格时遇到了问题，并且我的元素之间的宽度是均匀的，但看起来元素不应该是网格的 100%，否则它会占据整个页面并且很难看。

Answer 1

Why my grids would expand at about the halfway point?

这是因为你只使用了.col-lg-*网格类，它为具有大屏幕的设备设置列的样式，并在较低的屏幕上保留元素不变。

因此 block 级元素如<div>将填满其父项的整个空间。

考虑使用 col-md-*和/或 col-sm-*类以及为了在较小的屏幕上指定列的宽度，按以下顺序:

<div class="col-xs-* col-sm-* col-md-* col-lg-*">

更多信息可以引用我的回答:

• What happens when grid classes apply to devices with smaller breakpoint size