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

时间:2015-02-24 06:21:54

标签: html twitter-bootstrap

如何制作响应式网站,其中一个div中的标签和另一个div中的相应文本框。我写了一小段代码。它工作(对于md设备),但是当窗口大小调整大小时,它的格式不正确(两个标签都在一起)。如何纠正这个(对于xs设备)? PFB的截图。 sample.bmp

    <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>     

1 个答案:

答案 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垂直轴以模拟您需要的环境大小)