2014-09-02 91 views
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%,否则它会占用整个页面并且很难看。

回答

1

为什么我的网格会在大约中点处扩展?

这是因为你只使用.col-lg-*网格类,它的样式列具有大屏幕的设备和叶较低的屏幕不变的元素。

因此,块级元素(如<div>)将填充其父项的整个空间。

考虑使用col-md-*和/或col-sm-*类,以及以指定的小屏幕列的宽度,用以下命令:

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

如需进一步信息,你可以参考我的答案在这里: