Wie kann ich den Dropdown-Button hier vertikal mit den anderen Textfeldern ausrichten?

Question

Ich verwende einen primitiven Bootstrap von getbootstrap.com. Ich möchte das Dropdown-Menü für Kontotypen hier richtig ausrichten. Außerdem sind die Dropdown-Listenelemente nicht ordnungsgemäß auf die Dropdown-Schaltfläche ausgerichtet. Bitte helfen Sie. Danke.

<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

hinzufügen Klasse btn-group auf die dropdown.so der Dropdown-Liste das 100% width.Thus im Dropdown-Menü nicht bekommen zu center.Or hinzufügen display:inline-block Stil auf die .dropdown

ausgerichtet werden

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

Answer 2

Für den Augenblick können Sie die folgende Rückkehr später anwenden, um zu beheben.

Fix es auf der Seite.

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

</style>