Question

我有许多Twitter Bootstrap 3表单水平样式表单，这些表单嵌套在各个页面的列中。通常，当标签和输入有足够的空间并排显示时，它们会这样做，否则标签会出现在输入上方。一切都很好，并且符合预期和期望。

但是，如果没有足够的宽度可供开始使用表单，请说表单位于使用Bootstrap 12列网格系统的12个宽的外部列中，我看到标签被切断了消失在输入下方，而不是看到标签在输入上方移动。为了澄清，如果标签在上面，那么表格中就会有足够的宽度让所有东西都可见。

您可以在此处看到此处发生的简化示例，它使用Twitter Bootstrap 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>

如果此示例中的表单移动到页面右侧的9列部分而不是页面左侧的较小的3列部分，那么它将按预期响应，并且通常会显示侧面 - 如果没有足够的空间，可以在旁边或向上移动。我尝试过很多变种，包括多个col-xs，col-sm，col-md，col-lg甚至滚动我自己的解决方案，没有表格水平和标签控件，在表格周围添加行，更改Bootstraps最大宽度，等等。事情似乎相当一致，因为如果表单生活在页面的更广泛部分，表单会按预期响应。

之前是否有人遇到此问题或知道解决方案？这似乎是一个Twitter Bootstrap 3错误，但我可能会做错误的事情，所以欢迎任何更正。我有一个解决方法，迫使形式水平始终是垂直的，但我真的希望形式水平工作的方式与Twitter Bootstrap中的方式相同。

非常感谢任何反馈。

Answer 1

无论何时将列嵌套在另一列中，都必须将其包装为新行：

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

我添加后，标签和表单字段堆叠。

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

1 个答案: