html - Twitter Bootstrap 3 内联和横向表单

Question

我正在尝试将我的 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 中做到这一点？

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

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

Answer 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

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

这是演示

Answer 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;
    }

Answer 5

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