1
所以我试图用bootstrap网格创建一个简单的响应表单,但对我来说这非常棘手。你可以忽略我发布的大部分内容(初学者的Coldfusion,是多余的),但要注意网格类。Bootstrap网格布局:输入在中途点扩展100%宽度
<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%,否则它会占用整个页面并且很难看。