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使其具有响应性:)希望这会有所帮助。

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

1 个答案: