无法更改输入表单宽度

Question

我正在制作表格，我希望页面的左半部分填满该部分。我试过 col-lg-4，将 CSS 宽度更改为 100%，没有任何改变实际输入字段。我搜索了 Stack Overflow，但找不到任何有用的东西。第一张图是我的，第二张图是我想重现的。

<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>

Answer 1

使用 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>

Answer 2

好的，首先你不能有两个具有相同 ID 的元素，因为只有最后一个元素会拥有那个 ID 而第一个不会

要回答您的问题，请在 css

中尝试此操作

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

我宁愿你给你的表单一个 id，然后将这些类称为它的 children，比如 -#form_id .form-group {...

Answer 3

将 css 显示属性设置为内联块并赋予宽度 100%

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

无法更改输入表单宽度

Can't change input form width

css

forms

input-field

twitter-bootstrap-3