Стили стилей бутстрапа Twitter не функционируют должным образом

В следующем jsfiddle у меня встроенная форма с вводом и отправкой. Когда я уменьшаю размер экрана, вход переходит на 100% -ную ширину - это, очевидно, отзывчивость. Проблема заключается в том, что кнопка отправки не получает применяемую ширину 100% .... что я бы ожидал, если бы загрузочный приложил 100% к входу.Стили стилей бутстрапа Twitter не функционируют должным образом

Любые идеи, почему это так?

<form class="form-inline" role="form" style="width: 350px; margin: 0 auto;"> 
    <div class="form-group" > 
    <label for="postcode" class="sr-only">Postcode:</label> 
     <input type="text" class="form-control input-lg" id="email" placeholder="Postcode"> 
    </div> 
    <button type="submit" class="btn btn-primary btn-lg">Submit</button> 
    </form>

http://jsfiddle.net/orettyqv/

источник

2015-02-25 Mike Rifgin

Почему вы ожидаете, что кнопка будет иметь ширину в 100%, примененных к нему? – DavidG

Я знал, что это произойдет. Поскольку bootstrap применяет ширину 100% к входу - для обслуживания меньшего размера экрана ... не справедливо ли предположить, что он будет применять то же самое к submit? В противном случае вы окажетесь в ситуации, которая у меня есть в скрипке ... –

Единственная причина, по которой ваш 'input' составляет 100% ширину, связан с классом' form-control', который вы применили к нему. Вы можете применить это к своей кнопке, но она также фиксирует высоту, которую вы, вероятно, не хотите. – DavidG

Bootstrap не делает button элементов 100% ширину по умолчанию в любой точке останова, вы должны сделать это самостоятельно, в этом случае с запросом средств массовой информации. Например:

@media (max-width: 767px) { 
    .btn { 
     width: 100%; 
    } 
}

Пример: http://jsfiddle.net/orettyqv/1/

источник

2015-02-25 09:13:28 DavidG

Стили стилей бутстрапа Twitter не функционируют должным образом

ответ

Смежные вопросы