Текстовое поле Bootstrap не растягивается на всю ширину

почему текстовое поле в моей форме не растягивая на полный размер экрана? Он кажется довольно коротким!

<!-- row: 4 -->
<div class="row base-padding fill-dark">
    <div class="col-md-8 no-padding">
        <h2 class="white base-padding-bottom">SIGN UP FOR OUR NEWSLETTER</h3>
        <p class="light-grey">Receive exclusive promotions, <strong>free passes</strong> for <strong>family and friends</strong> and links to our weekly ad!</p>
        <br>
    </div>
    <div class="col-md-4 no-padding">
        <h2 class="white base-padding-bottom">EMAIL ADDRESS</h3>
        <form class="form-inline" role="form">
            <div class="form-group">
                <label class="sr-only" for="exampleInputEmail2">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
            </div>
            <button type="submit" class="btn btn-default">Sign in</button>
        </form>
    </div>
</div>
8
twitter-bootstrap

1 ответов

когда вы используете встроенную форму, включенную в Bootstrap, вы должны установить ширину для input вручную.

из документации Bootstrap:

Inputs, selects и textareas имеют ширину 100% по умолчанию в Bootstrap. Чтобы использовать встроенную форму,вам нужно будет установить ширину элементов управления формы, используемых внутри.

похоже, вам нужно использовать значение пикселя (px) при установке input ширина. Когда я пытаюсь установить его с помощью процентное значение он работает неправильно, по крайней мере, на моем конце.

если вы добавите что-то подобное в таблицу стилей, вы сможете изменить размер текстового поля так, как вам это нужно. Просто менять 256 на сколько вам нужно.

.form-inline .form-control {
width: 256px;
}

если я правильно понимаю документацию Bootstrap, он не использует .form-inline стиль на небольших экранах (

9