如何制作响应式网站,其中一个div中的标签和另一个div中的相应文本框。我写了一小段代码。它工作(对于md设备),但是当窗口大小调整大小时,它的格式不正确(两个标签都在一起)。如何纠正这个(对于xs设备)? PFB的截图。
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form role="form">
<div class="row">
<label class="col-md-4 col-xs-12" for="TextArea">Text Area</label>
<label class="col-md-4 col-xs-12" for="TextArea">Text Area</label>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
<div class="col-md-4 col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
答案 0 :(得分:2)
您应该将标签放在包含div
标记的每个textarea
中。
<form role="form">
<div class="row">
<div class="col-md-4 col-xs-12">
<label for="TextArea1">Text Area</label>
<textarea class="form-control" id="TextArea1"></textarea>
</div>
<div class="col-md-4 col-xs-12">
<label for="TextArea2">Text Area</label>
<textarea class="form-control" id="TextArea2"></textarea>
</div>
</div>
</form>
Test it here(滑动JSFiddles垂直轴以模拟您需要的环境大小)