Не могу изменить ширину формы ввода - PullRequest
Новая
       17

Не могу изменить ширину формы ввода

0 голосов
/ 12 мая 2018

Я делаю форму и хочу, чтобы левая половина страницы заполнила раздел.Я попробовал 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>

Form with wrong input widths

Form with correct input widths

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

хорошо, прежде всего вы не можете иметь два элемента с одинаковым идентификатором, потому что только последний элемент получит этот идентификатор, а первый не будет

отвечать на вашвопрос попробуйте это в css 

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

Я бы предпочел, чтобы вы дали идентификатор вашей форме, а затем назвали эти классы как ее потомки, например - # form_id .form-group {...

0 голосов
/ 12 мая 2018

установить свойство отображения css равным inline-block и дать ширину 100% 

.form-control{
   display:inline-block;
   width:100%
}
0 голосов
/ 12 мая 2018

используйте загрузчик 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>
...