Question

我想组织以下内容：

FORM
TEXTBOX1

TEXTBOX2  TEXTBOX3

假设我从以下结构开始，这样做的正确方法是什么：

<form>
<label...>
<input type="text">
<label...>
<input type="text">
<label...>
<input type="text">
</form>

我看到class="form-inline"使表单中的元素内联，但我只想要内联的第二个和第三个文本框而不是全部3.处理此问题的正确方法是什么？

Answer 1

如果您想要实现列http://jsfiddle.net/tVHMy/2/

，请尝试此演示

相关摘录：

<div class='row'>
    <div class='col-sm-6'>
        <div class='form-group'>
            <label for="user_password">Password</label>
            <input class="form-control" id="user_password" name="user[password]" size="30" type="password" />
        </div>
    </div>
    <div class='col-sm-6'>
        <div class='form-group'>
            <label for="user_password_confirmation">Password confirmation</label>
            <input class="form-control" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
        </div>
    </div>
</div>

Answer 2

<form class="form-horizontal">                                                                                                                            
  <div class="row "> 
    <div class="col-sm-12">                                                     
    <input type="text" class="form-control" placeholder="TextBox1"/>
    </div>                                  
  </div>                                              

  <div class="row">        
     <div class="col-sm-6">                                              
      <input class="form-control"  type="text" placeholder="TextBox2"/>                                                                     
     </div>
     <div class="col-sm-6"> 
      <input class="form-control" type="text" placeholder="TextBox3"/>  
     </div>                                            
   </div>                                                      
 </div>                                                    
</form>

使用上面的代码段获取所需的格式

如何使表单元素在bootstrap 3中正确排列？

2 个答案: