1

私は次のコードを持っています：

<fieldset>
 <legend> Personal Details </legend> 
 <form class =" form-inline well span9" > 

  <label> Last Name </label> 

  <input type="text" class = "span2" placeholder = "Type Last Name"/> 

  <label> Middle Name </label> 

  <input type="text" class = "span2"/>  

  <label> First Name </label> 

  <input type="text" class = "span2"/><br/>

  <label> NickName</label> 

  <input type="text" class = "span2"/>

   <label>Gender</label>
          <span class="controls span2">  
     <select id="select01" style="width:100%;">
        <option>Male</option>
        <option>Female</option>
     </select>
   </span> 

 </form>

何が起こるかというと、性別のラベルがエイリアスラベルとテキストフィールドの後に表示されます。誰かがこの問題を修正する方法を説明できますか？

ありがとう。

4

1 に答える 1

2


問題のフォームは次の方法で作成できます: http://jsfiddle.net/shail/sGgKE/

3 列形式の Jsfiddle http://jsfiddle.net/shail/ykpr5/show

編集：コメントのリクエストに従って：ブートストラップ付きの3列フォーム

<form class="well span9">
<div class="row">
    <div class="span3">
        <label>First Name</label>
        <input type="text" class="span3" placeholder="Your First Name">
        <label>Last Name</label>
        <input type="text" class="span3" placeholder="Your Last Name">
    </div>
    <div class="span3">
         <label>Nickname</label>
        <input type="text" placeholder="Nickname" class="span3">
        <label>Email Address</label>
        <input type="text" class="span3" placeholder="Your email address">
    </div>
    <div class="span3">
        <label>Gender</label>
        <select name="Gender" id="DropdownGender" class="span3">
            <option value="">Male</option>
            <option value="">Female</option>
        </select>
    </div>
 </form>

通常のフォームの配置

<div class="well span9">
<form id="form-inline">
    <fieldset>
        <legend>Personal Details</legend>
        <label>Last name</label>
        <input type="text" placeholder="Smith" class="input-xlarge">
        <label>Middle Name</label>
        <input type="text" placeholder="K" class="input-xlarge">
        <label>First Name</label>
        <input type="text" placeholder="John" class="input-xlarge">
        <label>Nickname</label>
        <input type="text" placeholder="Nickname" class="input-xlarge">
        <label>Gender</label>
        <select name="Gender" id="DropdownGender" class="input-xlarge">
            <option value="">Male</option>
            <option value="">Female</option>
        </select>
    </fieldset>
</form>
</div>
于 2013-02-26T01:12:36.240 に答える