为什么按钮使用默认布局无法正确对齐？

Question

我无法将form-group label和input下的按钮对齐。它始终位于label和input之间。见下面的截图。

截图

<div class = "row">

    <ul class="nav nav-tabs">
        <li><a href = "#">Create Department</a></li>
        <li><a href = "#">Manage</a></li>
    </ul>

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

        <br>
        <form class = "form-vertical" role = "form">

            <div class = "form-group col-xs-5">

                <label for = "department" class = "control-label">Department Name:</label>                  <input type= "text" name = "department" class = "form-control">

            </div>

            <div class = "form-group">

                <button type = "submit" class = "btn btn-primary">Create</button>

            </div>

        </form>

    </div>

</div>

Answer 1

它们位于同一行，因为您在第一个col-xs-5上指定了form-group。尝试删除应该工作的东西。

Answer 2

你可以像这样重写你的HTML

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

        <div class = "form-group">

            <label for = "department" class = "control-label">Department Name:</label>                  <input type= "text" name = "department" class = "form-control">

        </div>

        <div class = "form-group">

            <button type = "submit" class = "btn btn-primary">Create</button>

        </div>

    </form>

Answer 3

如果您想解决当前的问题，请尝试使用此代码。

<div class = "row">

    <ul class="nav nav-tabs">
        <li><a href = "#">Create Department</a></li>
        <li><a href = "#">Manage</a></li>
    </ul>

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

        <br>
        <form class = "form-vertical" role = "form">
<div class="row">
            <div class = "form-group col-xs-5">
            <label for = "department" class = "control-label">
             Department Name:</label><input type= "text" name = "department" class = "form-control">

            </div>
          </div>
          <div class="row">
            <div class = "form-group">

                <button type = "submit" class = "btn btn-primary">Create</button>

            </div>
          </row>
        </form>

    </div>

</div>

Answer 4

如果你想在窗体下面按下按钮，那么你必须创建另一行，如下所示：

<div class="row">
   <div class="col-xs-5">
        // Label
        // Input form
   </div>
</div>
<div class="row">
   <div class="col-xs-5">
        // Button
   </div>
</div>

如果您使用行，则内容将发生在墙旁边，但如果您对col-xs-12使用row，则会产生一些空间。按你的代码：

<div class = "row">

            <ul class="nav nav-tabs">
                <li>
                    <a href = "#">Create Department</a>
                </li>
                <li>
                    <a href = "#">Manage</a>
                </li>
            </ul>

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

                <br>
                <form class = "form-vertical" role = "form">

                    <div class="row">
                        <div class = "form-group col-xs-5">
                            <div class="col-xs-12">
                                <label for = "department" class = "control-label">Department Name:</label>
                            </div>

                            <div class="col-xs-12">
                                <input type= "text" name = "department" class = "form-control">
                            </div>
                        </div>

                    </div>

                    <div class="col-xs-12">

                        <button type = "submit" class = "btn btn-primary">
                            Create
                        </button>

                    </div>

            </div>
            </form>

        </div>

        </div>

Answer 5

您可以将标签放在选项组旁边，例如

<div class = "row">
<ul class="nav nav-tabs">
    <li><a href = "#">Create Department</a></li>
    <li><a href = "#">Manage</a></li>
</ul>
<div class = "col-md-12">
    <br>
    <form class = "form-vertical" role = "form">
        <div class = "col-md-12">
             <label for = "department" class = "control-label">Department Name:</label>                  
        </div>
        <div class = "form-group col-xs-5">
            <input type= "text" name = "department" class = "form-control">
        </div>
        <div class = "form-group">              
            <button type = "submit" class = "btn btn-primary">Create</button>
        </div>
    </form>
</div>

<强> JSFiddile

Answer 6

你必须再创建2个div，一个用于文本，一个用于按钮。

请在html下面试试。

如果你想在html旁边放置Create按钮，请尝试下面的代码。

<div class = "row">

    <ul class="nav nav-tabs">
        <li><a href = "#">Create Department</a></li>
        <li><a href = "#">Manage</a></li>
    </ul>

    <div class = "col-md-12">
    <br/>
      <form class = "form-vertical" role = "form">
      <div class = "col-md-12">
        <label for = "department" class = "control-label">Department Name:</label>
      </div>
      <div class = "form-group col-xs-5">
        <input type= "text" name = "department" class = "form-control">
      </div>
      <div class = "form-group">
        <button type = "submit" class = "btn btn-primary">Create</button>
      </div>
  </form>
</div>

</div>

或者如果您想在文本之后放置“创建”按钮。

<div class = "row">

<ul class="nav nav-tabs">
    <li><a href = "#">Create Department</a></li>
    <li><a href = "#">Manage</a></li>
</ul>

<div class = "col-md-12">
<br/>
  <form class = "form-vertical" role = "form">
  <div class = "col-md-12">
    <label for = "department" class = "control-label">Department Name:</label>
  </div>
  <div class = "form-group">
    <input type= "text" name = "department" class = "form-control">
  </div>
  <div class = "form-group">
    <button type = "submit" class = "btn btn-primary">Create</button>
  </div>