如何在此处与下拉按钮垂直对齐其他文本框？

Question

我正在使用getbootstrap.com的主要引导程序。我想在此处正确对齐帐户类型下拉列表。此外，下拉列表项与下拉按钮没有正确对齐。请帮忙。谢谢。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data" align="center"> 
      <div class="form-group">

          <div class="col-sm-12">
            <div class="dropdown">
              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Account type
              <span class="caret"></span>
              </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Supplier</a></li>
                  <li><a href="#">Client</a></li>
              </ul>
            </div>
          </div>

          <div class="form-group">
            <label for="supplieruname" class="col-sm-2 control-label">Username:</label>
           <div class="col-sm-4"><input type="text" class="form-control" id="supplieruname" placeholder="Username" tabindex="1" required></div>
           </div>

          <div class="form-group">
            <label for="supplierpassword" class="col-sm-2 control-label">Set Password</label>
            <div class="col-sm-4"><input type="text" class="form-control" id="supplierpassword" placeholder="Password" tabindex="2" float="right" required></div>
          </div>

          <div class="form-group"> 
            <label for="acctype" class="col-sm-2 control-label">Account Type</label>
            <div class="col-sm-4"><input type="text" class="form-control" id="acctype" placeholder="Company Name" tabindex="3" float="right" required></div>
          </div> 

          
        </div>

        <div class="col-sm-4">
            <div class="form-group"><input class="btn" type="submit" value="Save">
            <input type="reset" class="btn" name="clear" value="Clear">
            </div>
          </div>

  </form>

Answer 1

将等级btn-group添加到下拉列表中。因此，下拉列表不会获得100％的宽度。因此，下拉菜单将与中心对齐。或者向{{display:inline-block样式添加.dropdown样式1}}

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data" align="center"> 
      <div class="form-group">

          <div class="col-sm-12">
            <div class="dropdown btn-group">
              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Account type
              <span class="caret"></span>
              </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Supplier</a></li>
                  <li><a href="#">Client</a></li>
              </ul>
            </div>
          </div>

          <div class="form-group">
            <label for="supplieruname" class="col-sm-2 control-label">Username:</label>
           <div class="col-sm-4"><input type="text" class="form-control" id="supplieruname" placeholder="Username" tabindex="1" required></div>
           </div>

          <div class="form-group">
            <label for="supplierpassword" class="col-sm-2 control-label">Set Password</label>
            <div class="col-sm-4"><input type="text" class="form-control" id="supplierpassword" placeholder="Password" tabindex="2" float="right" required></div>
          </div>

          <div class="form-group"> 
            <label for="acctype" class="col-sm-2 control-label">Account Type</label>
            <div class="col-sm-4"><input type="text" class="form-control" id="acctype" placeholder="Company Name" tabindex="3" float="right" required></div>
          </div> 

          
        </div>

        <div class="col-sm-4">
            <div class="form-group"><input class="btn" type="submit" value="Save">
            <input type="reset" class="btn" name="clear" value="Clear">
            </div>
          </div>

  </form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

目前，您可以应用以下内容稍后再修复。

将其修复在页面上。

<style>
.dropdown, .dropup {
    position: fixed;
    z-index: 999;
   float:center;
}
.form-group{margin-bottom:20px;}

</style>