代码之家 › 专栏 › 技术社区 › Queen of the North

无法更改输入表单宽度

input-field twitter-bootstrap-3 forms css

1

Queen of the North · 技术社区 · 6 年前

我正在做一张表格,我想让页面的左半部分填满这一部分。我尝试了col-lg-4,将CSS宽度更改为100%,但没有改变实际的输入字段。我已经搜索了堆栈溢出,但找不到任何有效的内容。第一张图片是我拥有的,第二张图片是我试图重现的。

<section class="col-md-6">

        <form class="form-group row">

            <div class="form-group">
                <input type="text" class="form-control" id="inputEmail" placeholder="Cool Person">
            </div>

            <div class="form-group">
                <input type="email" class="form-control" id="inputEmail" placeholder="you@yourdomain.com">
            </div>

            <div class="form-group">
                <input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
            </div>

            <div class="form-group">
                <textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
            </div>

        </form>

    </section>

3 回复 | 直到 6 年前

1

Habeeb 6 年前

将css显示属性设置为内联块,并指定宽度100%

.form-control{
   display:inline-block;
   width:100%
}

2

0

Ahmed Tolba 6 年前

好的首先是你不能有两个具有相同id的元素,因为只有最后一个元素具有该id,而第一个元素没有

要回答您的问题,请尝试使用css

.form-group, .form-control {width : 100%;}

我宁愿您为表单提供一个id,然后将这些类称为其子类,比如-#form\u id。窗体组{。。。

3

0

Srinivas GV 6 年前

使用如下所述的bootstrap div并尝试

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
            <input type="text" class="form-control" id="inputEmail" 
                 placeholder="Cool Person">
            </div>

            <div class="form-group">
                <input type="email" class="form-control" id="inputEmail" placeholder="you@yourdomain.com">
            </div>

            <div class="form-group">
                <input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
            </div>

            <div class="form-group">
                <textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
            </div>
    </div>
    <div class="col-sm-6">
      Maps Section Comes Here!
    </div>
     </div>
</div>