Twitter Bootstrap 3 内联和横向表单答案

【问题标题】：Twitter Bootstrap 3 inline and horizontal formTwitter Bootstrap 3 内联和横向表单
【发布时间】：2013-09-23 15:45:02
【问题描述】：

我正在尝试将我的 Bootstrap 2 表单迁移到 Bootstrap 3。
我当前的代码和小提琴：http://jsfiddle.net/mavent/Z4TRx/

.navbar-sam-main .navbar-toggle{
    z-index:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="" id="myDialog1">

    <div class="" id="myDialog2">

        <form role="form" class="" id="contactForm" onsubmit="send(); return false;">
            <label>Please fill the form</label>
            <br/><br/>

            <div class="form-group">
                <label for="name">My Label 2</label>
                <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
            </div>

            <div class="form-group">
                <label for="email">My Label 3</label>
                <input type="email" class="form-control" name="email" id="email" required="required">
            </div>

            <div class="form-group">
                <label for="message">My Label 4</label>
                <textarea class="form-control" name="message" id="message" required="required"></textarea>
            </div>

            <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px">Send</button>
        </form>

    </div>


</div>

我想要内联行为，我的标签 2 将在文本输入旁边，我的标签 3 将在文本输入旁边。我还需要水平行为，我的标签 4 将位于文本区域的顶部。我的标签 2 和标签 3 的文本框将是 4 列宽，我的标签 4 的宽度将是表单的全宽。

如何在 Bootstrap 3 中做到这一点？

【问题讨论】：

在这里完美描述 - getbootstrap.com/css/#forms-horizontal 将 col-- 类添加到您的标签并输入包装 div。
我唯一关心的是不添加 col--。文档中没有同时写 inline + Horizontal。

标签： html css twitter-bootstrap

【解决方案1】：

仅仅因为文档建议您应该使用表单控件并不意味着您必须这样做。您可以只使用内置的网格系统来实现布局。有关工作示例，请参阅http://bootply.com/82900。代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <form role="form">
    <div class="row">
      <label class="col-xs-4" for="inputEmail1">Email</label>
      <div class="col-xs-8">
        <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <label class="col-xs-4" for="inputPassword1">Password</label>
      <div class="col-xs-8">
        <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
      </div>
    </div>
    <div class="row">
      <label class="col-xs-12" for="TextArea">Text Area</label>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <textarea class="form-control" id="TextArea"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>
</div>

以上代码呈现的屏幕截图：

更新：刚刚意识到我删除了标签标签。更新了答案，将<label> 替换为<div>。

更新：更新代码以反映需要以小宽度保持在此布局中，如下面的 cmets 中所要求的。有关工作示例，请参阅 JS fiddle。

【讨论】：

在大屏幕上这行得通。但是，如果屏幕不宽，输入字段将进入下一行。请检查这个小提琴：jsfiddle.net/8xxUV/1
我在灯箱对话框中显示此对话框页面，所以我的灯箱宽度接近 600 像素。
然后只需将所有col-md-* 更改为col-sm-* 或col-xs-*。 jsfiddle.net/8xxUV/2 用col-xs-* 显示它。我还必须稍微更改列数，以确保标签不会被输入重叠。
另外，由于您以某种模式显示此内容，因此我将切换列宽以占据对话框的整个宽度。请参阅 jsfiddle.net/8xxUV/3 作为另一种选择。
谢谢。这完全是我所需要的。作为旁注，textarea 的高度对我来说非常小。所以我为将来添加了这个：< textarea class="form-control" name="message" id="message" required="required" style="height: 150px;" > < /textarea >

【解决方案2】：

您正在寻找的根本不是真正的内联行为，只是水平的。

这段代码应该会有所帮助：

<div class="" id="myDialog1">
    <div class="" id="myDialog2">
        <form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;">
            <label>Please fill the form</label>
            <br><br>
            <div class="form-group">
                <label for="name" class="col-lg-3 col-sm-3">My Label 2</label>
                <div class="col-lg-7 col-sm-7">
                    <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
                </div>
            </div>

            <div class="form-group">
                <label for="email" class="col-lg-3 col-sm-3">My Label 3</label>
                <div class="col-lg-7 col-sm-7">
                    <input type="email" class="form-control" name="email" id="email" required="required">
              </div>
            </div>

            <div class="form-group">
                <label for="message" class="col-lg-3">My Label 4</label>
                <div class="col-lg-10 col-sm-10">
                     <textarea class="form-control" name="message" id="message" required="required"></textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button>
        </form>
    </div>
</div>

看起来像这样：

col-sm-* 标签是可选的 - 它们只是在您缩小窗口时阻止元素堆叠。

您可以在这里试用：http://bootply.com/82889

【讨论】：

【解决方案3】：

我遇到了同样的问题，这是我的解决方案：

<form method="post" class="col-md-12 form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

这里是Demo

【讨论】：

【解决方案4】：

你可以试试下面的代码

<div class="" id="myDialog1">



        <form role="form" class="" id="contactForm" onsubmit="send(); return false;">
            <div class="clearfix igr col-md-12">
                <label>Please fill the form</label>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <label for="name">My Label 2</label>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
                </div>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <label for="email">My Label 3</label>
                </div>
                <div class="col-md-3">
                    <input type="email" class="form-control" name="email" id="email" required="required">
                </div>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-12">
                    <label for="message">My Label 4</label>
                </div>
                <div class="col-md-3">
                    <textarea class="form-control" name="message" id="message" required="required"></textarea>
                </div>
            </div>
            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button>
                </div>
            </div>
        </form>
    </div>

并将样式用作：

label,textarea{
        margin:5px 0;
    }
    .igr{
        margin:15px 0;
    }

【讨论】：

此解决方案也不适用于小屏幕。请检查：jsfiddle.net/jLgTe/1 表单创建新行。
为了让解决方案在小屏幕上工作，请使用 col-sm* 而不是 col-md*

【解决方案5】：

将control-label 类添加到您的标签应该可以解决问题。

【讨论】：