在容器中输入文本大小调整大小

Question

我正尝试在容器中创建联系人表单，但是每次我尝试测试它或调整浏览器或使用移动设备时，文本输入字段不会保留集装箱。文本字段超越形式

<div class="col-md-4">  
<div class="thumbnail"> 
<div class="container">  
<form id="frmContact" action="" method="post"> 
<div id="mail-status"></div> 
<div> 
<label style="padding-top:0px;">Name:</label> 
<span id="userName-info" class="info"></span><br/> 
<input type="text" name="userName" id="userName" class="demoInputBox" placeholder="Enter Full Name"> 
</div> 
<div> 
<label>Email:</label> 
<span id="userEmail-info" class="info"></span><br/> 
<input type="text" name="userEmail" id="userEmail" class="demoInputBox" placeholder="Enter E-mail Address"> 
</div> 
<br> 
<div> 
<label>Attachment:</label><br/> 
<input type="file" name="attachmentFile" id="attachmentFile" class="demoInputBox"> 
</div> 
<br> 
<div> 
<label>Subject:</label> 
<span id="subject-info" class="info"></span><br/> 
<input type="text" name="subject" id="subject" class="demoInputBox" placeholder="Subject"> 
</div> 
<div> 
<label>Content:</label> 
<span id="content-info" class="info"></span><br/> 
<textarea name="content" id="content" class="demoInputBox" cols="" rows="5" placeholder="Concerns"></textarea> 
<br> 
</div> 
<div> 
<input type="submit" value="Send" class="btnAction" /> 
</div> 
</form> 
<div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif" /></div> 
</div> 
</div> 
</div> 

Answer 1

对付这种方法是使用 Mediaqueries的最佳途径。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp 您可以使用该链接作为指南。

您也可以使用Flex使其响应:)希望这有助于。