为什么我的引导控件在我的表单中没有正确调整大小？ [英] Why do my bootstrap controls not resize correctly within my form?

问题描述

我真的很难过这个，也许我一直在看脚本太长时间，但任何人都可以帮我确定为什么我的表格控件没有调整大小以使用包含div的整个宽度？

 <   div     class   = 容器 >  
 <  表格   操作  =  / Home / DoQuoteMe    class   =  ajax   方法  =  post   角色  = 表单 >  
 <   div     class   =   form-group >  
 <   label     class   =  control-label      = 名称 > 名称：<   / label  >  
 <   input     class   = 表单控制    type   =  text    id   = 名称    name   = 名称    占位符  = 您的姓名   必需  =  >  
 <   / div  > ;  
 <   div     class   =  form-group >  
 <   label     class   = < span class =code-keyword> control-label    for   = 电话  > 电话：<   / label   >  
 <   input     class   =  form-control     type   = < span class =code-keyword> text    id   = 电话   名称  = 电话   占位符  = 电话号码   必需  =  >  
 <   / div  >  
 <   div     class   =  form-group >  
 <   label    类  =  control-labe l      = 单元格 > 单元格：<   / label  >  
 <  输入    class   = 表单控制   类型  =  text    id   =  Cell   名称  = 单元格   占位符  =  Cell＃    required   =   >  
 <   / div  >  
 <   div    类  = 表格 - group >  
 <  标签    class   =  control-label      = 电子邮件 > 电子邮件：<   / label  >  
 <  输入    class   = 表单控件   类型  =  email    id   = 电子邮件   名称  = 电子邮件 < span class =code-attribute>  占位符  =  [e-mail]   必需  =  >  
 <   / div  >  
 <   div     class   =  form-group  >  
 <   l abel     class   =  control-label      = 地址 > 地址：<   / label  >  
 < span class =code-keyword><   textarea     class   =  form-control    id   = 地址    名称  = 地址   占位符  = 您的地址   必需  =    行  =  5 >  <   / textarea  >  
 <   / div  >  
 <   div     c lass   =  form-group > ;  
 <   label     class   =  control-label      = 评论 > 评论：<   / label  >  
 <   textarea     class   =  form-control    id   = 评论    名称  = < span class =code-keyword>注释   占位符  = 您的评论   必需  =    行  =  5 < span class =code-keyword>>  <   / textarea  >  
 <   / div  >  
 <   div     class   =   form-group >  
 <  按钮    type   = 提交   < span class =code-attribute> class   =  btn btn-primary < span class =code-keyword>> 提交<   / button  >  
 <  按钮    type   = 重置    class   =  btn btn-default > ; 重置<   / button  >  
 <   / div   >  
 <   / form  >  
 <   / div  >  

这是我的问题的实例的链接Fiddler示例 [ ^ ]。任何帮助将不胜感激。

解决方案

输入控件的宽度由bootstrap样式表中的第236行设置：

< pre lang =CSS> 输入， textarea ，。 uneditable-input { width ： 206px; }

您可能需要样式表中的内容如下：

 输入 { width  ：  100％！important }  

Hi,

I am really stumped by this and maybe I have been looking at the script for too long, but can anyone help me in determining why my form controls are not resizing to use the full width of the containing div?

<div class="container">
    <form action="/Home/DoQuoteMe" class="ajax" method="post" role="form">
        <div class="form-group">
            <label class="control-label" for="Name">Name:</label>
            <input class="form-control" type="text" id="Name" name="Name" placeholder="Your name here" required="">
        </div>
        <div class="form-group">
            <label class="control-label" for="Tel">Tel:</label>
            <input class="form-control" type="text" id="Tel" name="Tel" placeholder="Tel #" required="">
        </div>
        <div class="form-group">
            <label class="control-label" for="Cell">Cell:</label>
            <input class="form-control" type="text" id="Cell" name="Cell" placeholder="Cell #" required="">
        </div>
        <div class="form-group">
            <label class="control-label" for="Email">Email:</label>
            <input class="form-control" type="email" id="Email" name="Email" placeholder="[e-mail]" required="">
        </div>
        <div class="form-group">
            <label class="control-label" for="Address">Address:</label>
            <textarea class="form-control" id="Address" name="Address" placeholder="Your address here" required="" rows="5"></textarea>
        </div>
        <div class="form-group">
            <label class="control-label" for="Comments">Comment:</label>
            <textarea class="form-control" id="Comments" name="Comments" placeholder="Your comments here" required="" rows="5"></textarea>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-default">Reset</button>
        </div>
    </form>
</div>

This is the link to a live example of my issue Fiddler example[^]. Any help will be greatly appreciated.

解决方案

The width of input controls is being set by line 236 in the bootstrap style sheet:

input,textarea,.uneditable-input{width:206px;}

You probably want something in your stylesheet like:

input { width: 100% !important }

这篇关于为什么我的引导控件在我的表单中没有正确调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！