他のテキストボックスにドロップダウンボタンを縦に並べるにはどうすればいいですか？

Question

私はgetbootstrap.comのprimalyブートストラップを使用しています。ここでは、アカウントの種類のドロップダウンを適切に調整したいと思います。また、ドロップダウンリストの項目がドロップダウンボタンに適切に配置されていません。助けてください。ありがとう。

<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

.dropdown

に display:inline-blockスタイルを追加center.Orに整列されるドロップダウンメニューwidth.Thus 100％を取得することはありませんドロップダウンdropdown.soにクラス btn-groupを追加します。

<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

しばらくの間、以下を適用して後で修正することができます。

ページで修正してください。

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

</style>