Question

如何制作响应式网站，其中一个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>

Answer 1

您应该将标签放在包含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垂直轴以模拟您需要的环境大小）

如何在一个div中对齐标签，在另一个div中对齐相应的文本框？

1 个答案: