Question

我正在使用Bootstrap 3，我有一个相当标准的页面布局：左边的一个宽列（.col-md-8），包含纯文本，右边有一个较窄的列（.col-md-4 ），包含一个表格。

反过来，每个表单字段都包含在.form-group。

中

在my first attempt中，.form-groups溢出了包含列的左右边缘。（确保JSFiddle预览框架至少与Bootstrap的sm断点一样宽。）我添加了一个粉红色的背景div，以显示.form-groups 应该留在其中的框。 / p>

在my second attempt中，我在.container内添加了.col-md-4，然后将.form-group 内的每个.row包裹起来， a .col-md-4。

这就是诀窍，但......这是正确和首选的方式吗？这似乎是一个非常多的额外的样板标记，以实现一些应该自然发生的事情。

Bootstrap文档相当不错，但它们掩盖了像这样的一些“大图”的东西。对于那些已经熟悉响应式CSS的人来说，也许这些东西是显而易见的，但对于像我这样的初学者来说这可能会让人感到困惑。

这是我第一次尝试的代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
</script>
<head>
<body>
  <div class="container">

    <h1>Broken version</h1>
    <h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>

    <div class="row">

        <div class="col-md-8">

            <div style="background-color: orange;">
                <p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
            </div>

        </div> <!-- .col-md-8 -->

        <div class="col-md-4">

            <div style="background-color: pink;">

                <form role="form" class="form-horizontal">

                    <div class="form-group">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" type="text" name="name" id="name">                    
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="email">Email</label>
                        <input class="form-control" type="email" name="email" id="email">                    
                    </div>

                    <button type="submit">Submit</button>

                </form>

            </div> <!-- pink background div -->

        </div> <!-- .col-md-4 -->

    </div> <!-- .row -->

</div> <!-- .container -->

</body>

</html>

这是我第二次可能更正的尝试的代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
  <div class="container">

    <h1>Corrected (?) version</h1>
    <h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>

    <div class="row">

        <div class="col-md-8">

            <div style="background-color: orange;">
                <p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
            </div>

        </div> <!-- .col-md-8 -->

        <div class="col-md-4">

            <div style="background-color: pink;">

                <div class="container">

                    <form role="form" class="form-horizontal">

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label class="control-label" for="name">Name</label>
                                <input class="form-control" type="text" name="name" id="name">                    
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label class="control-label" for="email">Email</label>
                                <input class="form-control" type="email" name="email" id="email">                    
                            </div>
                        </div>

                        <button type="submit">Submit</button>

                    </form>

                </div> <!-- .container -->

            </div> <!-- .pink background div -->

        </div> <!-- .col-md-4 -->

    </div> <!-- .row -->

</div> <!-- .container -->

</body>

</html>

Answer 1

之前的两个答案都缺乏阅读Bootstrap文档。

您不需要使用.form-horizontal，因为这不是.form-horizontal情况。查看.form-horizontal示例的文档，这不是您使用该类的地方。在表单上不使用任何课程，然后您不需要.container将.form-group上的负余量归零。

http://jsfiddle.net/fr6p90ar/6/

与没有.form-horizontal的情况相同，没有嵌套的.container（阅读文档）。

也是这样：

<div class="form-group col-md-4">

就像在.row上放一个列类，它会使事情变得非常糟糕。

只需使用：

<div class="form-group">

Answer 2

这应该有帮助（来自boostrap doc：http://getbootstrap.com/css/#forms-horizontal

使用Bootstrap的预定义网格类来对齐标签和组通过将.form-horizontal添加到水平布局中来控制表单形成。这样做会改变.form-groups以表现为网格行，因此不需要对于.row。

所以考虑到这一点你可以清理你的html - 你也可以删除容器。这里是您表单的更简洁版本的小提琴：http://jsfiddle.net/fr6p90ar/2/

<div class="col-md-4"  style="background-color: pink;">

                    <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label" for="name">Name</label>
                                <input class="form-control" type="text" name="name" id="name"/>                    

                        </div>


                            <div class="form-group">
                                <label class="control-label" for="email">Email</label>
                                <input class="text form-control" type="email" name="email" id="email"/>                    
                            </div>


                        <button type="submit">Submit</button>

                    </form>

        </div> <!-- .col-md-4 -->

Bootstrap 3：如何在列内使用表单组？

2 个答案:

http://jsfiddle.net/fr6p90ar/6/