Question

我有以下代码：

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

所发生的情况是，性别标签出现在别名标签和文本字段之后。有人可以解释如何解决这个问题吗？

感谢。

Answer 1

您可以通过以下方式创建相关表单：
这是http://jsfiddle.net/shail/sGgKE/

的jsfiddle

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

编辑：根据评论中的请求：带有引导程序的三列表格

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

引导表单标签和文本框排列

1 个答案: