引導窗體太大

我想在寬度爲col-sm-8的區域內設計窗體。表單中有三列：標籤，文本輸入和用戶名檢查。標籤的寬度是col-sm-2，用戶名檢查的寬度是col-sm-1，其餘的應該是文本輸入。我的計算是文本輸入應該有5的寬度，但結果太難看。我試圖手動將寬度設置爲col-sm-7，但仍然不夠長。如果我將文本輸入的寬度設置爲col-sm-8，則在網頁底部看到滾動條。我的目標是 1.將標籤的寬度設置爲左邊的col-sm-2; 2.將用戶名檢查的寬度設置爲右側的col-sm-1; 3.文字輸入需要整個寬度在中間。如何做到這一點？我的舊代碼如下：引導窗體太大

<div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;"> 
    <form name="form_register" id="form_register" method="post" class="form-horizontal"> 
    <fieldset> 
     <legend class="text-center">Enter your details below.</legend> 
     <div class="form-group"> 
      <label for="username" class="col-sm-2 control-label">Username *</label> 
      <div class="col-sm-7"> 
      <input type="text" name="username" id="username" class="form-control" maxlength="40" required /> 
      </div> 
      <div class="col-sm-1"><span id="usernameCheck"></span></div> 
     </div> 
     <div class="form-group"> 
      <label for="password" class="col-sm-2 control-label">Password *</label> 
      <div class="col-sm-7"> 
      <input type="password" name="password" id="password" class="form-control" maxlength="20" /> 
      </div> 
     </div>

我的新代碼，結果是改善了，但我只是不知道是否有更優雅的方式：從

<div class="col-sm-7">

到

用戶名變化DIV

<div class="col-sm-7" style="width:75%">

來源

2015-06-25 H. Wang

讓我們從這個開始：http://codepen.io/anon/pen/qdVJzw什麼是你想在這裏做，我不能從你原來的問題理解 – Spade

這個代碼可以幫助您

<html> 
 
    <head> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
    </head> 
 
    <body> 
 
    <div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;"> 
 
    <form name="form_register" id="form_register" method="post" class="form-horizontal"> 
 
    <fieldset> 
 
     <legend class="text-center">Enter your details below.</legend> 
 
     <div class="form-group"> 
 
      <label for="username" class="col-sm-2 control-label">Username *</label> 
 
      <div class="col-sm-7"> 
 
      <input type="text" name="username" id="username" class="form-control" maxlength="40" required /> 
 
      </div> 
 
      <div class="col-sm-1"><span id="usernameCheck">User Error Check</span></div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="password" class="col-sm-2 control-label">Password *</label> 
 
      <div class="col-sm-7"> 
 
      <input type="password" name="password" id="password" class="form-control" maxlength="20" /> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2015-06-25 06:55:34

引導窗體太大

回答

相關問題