Responsive design Twitter Bootstrap 3-嵌套表单水平响应设计问题_Responsive Design_Twitter Bootstrap 3

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

responsive-design twitter-bootstrap-3

Responsive design Twitter Bootstrap 3-嵌套表单水平响应设计问题,responsive-design,twitter-bootstrap-3,Responsive Design,Twitter Bootstrap 3,我有很多twitterbootstrap3表单水平样式的表单，它们嵌套在不同页面的列中。通常，当有足够的空间让标签和输入并排显示时，标签就会并排显示，否则标签就会显示在输入上方。一切都很好，正如预期和期望的那样然而，当表单开始时没有太多的宽度可用时，比如说表单位于外部列中，使用Bootstrap 12列网格系统，12列中有3列宽，我看到标签被切断并消失在输入下面，而不是看到标签在输入上面移动。要澄清的是，如果标签在上面，那么表单中就有足够的宽度使所有内容都可见您可以在这里看到一个简化的示例，

我有很多twitterbootstrap3表单水平样式的表单，它们嵌套在不同页面的列中。通常，当有足够的空间让标签和输入并排显示时，标签就会并排显示，否则标签就会显示在输入上方。一切都很好，正如预期和期望的那样

然而，当表单开始时没有太多的宽度可用时，比如说表单位于外部列中，使用Bootstrap 12列网格系统，12列中有3列宽，我看到标签被切断并消失在输入下面，而不是看到标签在输入上面移动。要澄清的是，如果标签在上面，那么表单中就有足够的宽度使所有内容都可见

您可以在这里看到一个简化的示例，它使用了Twitter Bootstrap 3文档中的表单水平示例：

在上面显示的示例中，“电子邮件”和“密码”标签被截断，而不是移动到输入上方。其代码如下：

<!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列。

如果将此示例中的表单移动到页面右侧的9列部分，而不是页面左侧较小的3列部分，则它的行为将与预期一致，并且如果没有足够的空间，通常会并排显示或移动到上方。我尝试了很多变化，包括多个列X、列sm、列md、列lg，甚至在没有窗体水平和标签控件的情况下滚动我自己的解决方案，在窗体周围添加行，更改引导最大宽度，等等。事情似乎是相当一致的，因为如果表单位于页面的更宽部分，它会像预期的那样响应

以前是否有人遇到过这种情况或知道解决方案？这似乎是一个Twitter Bootstrap3错误，但我可能做了一些不正确的事情，所以欢迎任何更正。我有一个解决办法，强制形成水平面，使其始终垂直，但我真的希望以Twitter引导中预期的方式实现水平面

非常感谢您的反馈。

任何时候您将一列嵌套在另一列中时，都必须使用新行包装该列：

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


电子邮件

一旦我添加了这些，标签和表单字段就会堆叠起来。

感谢您抽出时间发布反馈。谢谢在我最初发表文章之前，我曾尝试在两个主列中的每一列中添加一个额外的行包装器，但不幸的是，这根本没有帮助（根据引导文档，如果您有“form horizontal”，则不需要“row”。）我从您的示例中注意到，实际上，在左列和右列之间添加了额外的行。这实际上会将输入列移动到标签下的新行，因此标签始终位于顶部且不响应。如果您在没有外部列的情况下测试表单，您可以看到这一点。啊，很抱歉。祝你好运我真的很感谢你花时间修改并发布回复。谢谢你的好运。：）