2013-10-05 4 views
0

Я создал «держатель» для моего входа в полеBootstrap Отзывчивый Выпуск в DIV

.box{ 
background-color: #ffffff; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
-webkit-background-clip: padding-box; 
-moz-background-clip: padding; 
background-clip: padding-box; 
padding: 1em; 
border: 1px solid #d8dadd; 
    } 

.box-login{ 
    margin: 0 auto; 
    width: 390px; 
} 

бушель проблема элементы (TextBox) внутри коробки разве отзывчив, он ведет себя как не реагирующего элемента.

Любая идея, как я могу это исправить?

Заранее спасибо

+1

отправьте свой HTML-код. Но вам просто нужно сделать 'max-width: 390px;', а затем установить 'width: 100%;', 'float: left;' и 'position: relative;', чтобы изменить его с окружающим элементом. EDIT: если вы хотите, чтобы ваш ящик вырос, как кто-то, это совсем другая история. – Deryck

+0

Вы можете установить ширину с помощью CSS [медиа-запросов] (http://stackoverflow.com/questions/13550541/media-min-width-max-width). – jstephens0

ответ

1

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

Как вы указали фиксированную ширину для класса .box-login, тогда коробка не отвечает на ширину, поэтому элементы внутри тоже не отвечают.

Укажите ширину и максимальную ширину в CSS так:

.box-login{ 
    margin:0 auto; 
    /* if you want a slight margin on smaller viewports, lower the width value */ 
    width:100%; 
    max-width:390px; 
} 
1

установить максимальную ширину

.box-login{ 
    margin: 0 auto; 
    width: 390px; 
    max-width: 100%; 
} 
+0

Не должно быть «ширина: 100%;» с «max-width: 390px;»? –

+0

Нет, мой ответ правильный - http://jsfiddle.net/Ra9dc/ – Vector

+0

Как и мое предложение: http://jsfiddle.net/Xd7TW/1/. Ядро Bootstrap использует 'width: (x)%; max-width: (x) px; 'синтаксис, поэтому предлагается сделать это таким образом. –

0

Как вы определили ширину для .box-login класса, он не будет действовать отзывчивым образом. Если вы хотите, чтобы ваш класс box-login был отзывчивым, вы должны установить ширину до 100% и указать max-width. Вот css:

.box-login{ 
    margin: 0 auto; 
    width: 100%; 
    max-width: 390px; 
} 
Смежные вопросы