Question

我试图将标签与Bootstrap 4水平形式的文本框放在同一行。似乎不起作用。文本框始终显示在下一行中。非常感谢任何帮助。

<div class="form-group form-group-sm col-sm-6">
  <label for="first_name" class="col-form-label">First Name</label>
  <div>
    <input type="text" class="form-control" id="first_name" name="first_name">
  </div>
</div>

小提琴：https://jsfiddle.net/gunnersfan/mrc4tdu1/

Answer 1

col-*必须在.row。在标签上使用网格列类并输入包装...

http://www.codeply.com/go/TUs7hGHnXP

<form class="form-horizontal">
    <div class="container">
        <div class="row">
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="first_name" class="col-sm-3 col-form-label">First Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="first_name" name="first_name">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="last_name" class="col-sm-3 col-form-label">Last Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="last_name" name="last_name">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="Street" class="col-sm-3 col-form-label">Street</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="Street" name="Street">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="City" class="col-sm-3 col-form-label">City</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="City" name="City">
                    </div>
                </div>
            </div>

        </div>

    </div>
</form>

http://www.codeply.com/go/TUs7hGHnXP

Answer 2

对于弹性版式，您还可以使用嵌入式表单：

<form class="form-inline" action="/action_page.php">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
  <div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
       <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

请参见Inline forms，Spacing和Flexbox

Answer 3

您可以像下面这样编写以前的bootstrap水平表格

<form>
<div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="email" value="" placeholder="Email Address">
    </div>
</div>
<div class="form-group row">
    <label for="password" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
</div></form>

水平表格：标签旁边的文字输入无效

3 个答案: