Bootstrap中的标签覆盖文本框

Question

我相对比较新，不得不实际设计网页样式，而我在使用Bootstrap时遇到了问题。如下面的bootply所示，使用引导列和一些自定义样式的简单页面会导致标签在调整页面大小时与文本框重叠 - 例如，尝试缩小页面的宽度。我错过了什么导致了这种行为？

http://www.bootply.com/ttuZZWim70

谢谢！

Answer 1

如果您试图创建一个水平表单，您将需要添加适当的Bootstrap水平表单类。例子可以在Horizontal Form找到。你会想要在表单元素上使用类似于form-horizontal类的类似于以下内容的html，并使用form-group来标记每组标签/输入。您可以根据需要调整col-sm-*以组织您的布局。最好的做法是尽量让你的列定义col-*-*加起来为12.两个得到两个form-group显示在一行上，你可以利用类似col-md-6的东西包裹在每个form-group周围。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <form class="form-horizontal"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="inputEmail3" placeholder="Test"> 
          </div> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="inputEmail3" placeholder="Test"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

这是一个jsfiddle显示了一个例子。您需要扩展结果窗口以便能够并排查看元素。横向表单元素占据了相当大的空间，所以我可能会建议给每个自己的独立行添加类似于bootstrap上的示例。

让我知道是否有帮助。 谢谢！

Answer 2

复制并粘贴到您的代码中确保它能正常工作。

     <div class="form-group field"> 
          <label>Email Address</label> 
          <input type="text" class="form-control" placeholder="Email Address"> 
         </div> 

Answer 3

你可以试试下面的链接。

fiddle

<form class="well span12"> 
 
    <div class="row"> 
 
     <div class="span6"> 
 
     <label>Long name test 1</label> 
 
     <input type="text" class="span6"> 
 
     <label>Long name test 3</label> 
 
     <input type="text" class="span6"> 
 
     </div> 
 
     <div class="span6"> 
 
     <label>Long name test 2</label> 
 
     <input type="text" class="span6"> 
 
     <label>Long name test 4</label> 
 
     <input type="text" class="span6"> 
 
     </div> 
 
    </div>   
 
</form>