Twitter Bootstrap 3 - 嵌套表单水平响应式设计问题

我有许多Twitter Bootstrap 3表单水平样式表单，它们嵌套在各种页面上的列中。一般来说，当标签和输入有足够空间并排显示时，他们会这样做，否则标签会出现在输入上方。一切都很好，并且如预期和期望的那样。Twitter Bootstrap 3 - 嵌套表单水平响应式设计问题

但是，当表单的起始位置没有太多可用的宽度时，比如说表单位于使用Bootstrap 12列网格系统的12列宽的3列外部，我看到标签被切断并在输入下方消失，而不是看到标签在输入上方移动。为了澄清，如果标签在上面，那么在窗体中将会有足够的宽度来显示所有内容。

可以看到的此这里存在的一个简化的例子，它使用Twitter的引导3文档中找到的形式水平例如： http://jsfiddle.net/BF4ZK/

在上面的例子中所示，“电子邮件”和“密码”标签被截断而不是在输入之上移动。造成这种情况的代码如下：

<!DOCTYPE html><html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css"  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> 
    <script    type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> 
    <script    type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 

      <!-- always have two side-by-side columns --> 
      <div class="col-xs-3"> 

       <!-- place a form in the left column - exact copy from Bootstrap official example of form-horizontal --> 
       <form class="form-horizontal" role="form"> 
        <div class="form-group"> 
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
        <div class="col-sm-10"> 
         <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
        <div class="col-sm-10"> 
         <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <div class="checkbox"> 
         <label> 
          <input type="checkbox"> Remember me 
         </label> 
         </div> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-default">Sign in</button> 
        </div> 
        </div> 
       </form>   

      </div> 

      <div class="col-xs-9"> 
       3 col to left, 9 col to right. 
      </div> 

     </div> 
    </div> 
</body>

如果在本实施例中的形式被转移到要在页面，而不是较小的3个柱部的左侧右侧9柱部如果没有足够的空间，那么它将按照预期作出响应，并且通常并排显示或向上移动。我已经尝试了很多变体，包括多个col-xs，col-sm，col-md，col-lg，甚至在没有窗体横向和标签控件的情况下滚动我自己的解决方案，在表单中添加行，更改Bootstraps最大宽度，等等。事情似乎是相当一致的，因为如果形式存在于页面的更广泛的部分，则该形式按照预期作出响应。

有没有人遇到过这个或知道解决方案？这似乎是一个Twitter的Bootstrap 3错误，但我可能做了一些不正确的事情，所以会欢迎任何更正。我有一个解决方法，强制form-horizontals始终是垂直的，但我真的想要按照它在Twitter Bootstrap中的意图进行表单水平工作。

非常感谢任何反馈。

来源

2014-01-08 Neil Cresswell

任何时候当你窝另一列内的列，你必须有一个包裹着一个新行：

<div class="col-xs-3"> 
<!-- place a form in the left column - exact copy from Bootstrap official example of form-horizontal --> 
<form class="form-horizontal" role="form"> 
<div class="form-group"> 
<label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
<div class="row"> 
<div class="col-sm-10"> 
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">

有一次，我补充说，标签和表单字段堆叠。

来源

2014-01-08 22:13:16 moodyjive

我感谢您抽出时间发表反馈意见。谢谢。我曾尝试在我的原始文章之前在两个主要列的每一列中添加一个额外的行包装器，但不幸的是，根本没有任何帮助（并且根据Bootstrap文档，如果您的表单为横向，则不需要“行” “）。我从你的例子中注意到，你实际上在左列和右列之间添加了额外的行。这实际上将输入列移动到标签下方的新行，因此标签始终位于顶部并且不响应。如果您测试没有外栏的表单，您可以看到这一点。 –

啊，对不起。祝你好运！ – moodyjive

我非常感谢您花时间修补和发布回复。谢谢你的好运。 :) –

Twitter Bootstrap 3 - 嵌套表单水平响应式设计问题

回答

相关问题