如何在引导程序中并排显示文本框

时间:2017-07-21 08:39:33

标签: twitter-bootstrap

我是bootstrap的新手。如何显示文本框应使用Bootstrap并排显示的表单?

<form>
  <div class="form-group">
    <label >First name</label>
    <input type="text" class="form-control" id="firstName" >
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Last Name</label>
    <input type="email" class="form-control" id="lastName" >
  </div>
  <button type="submit" class="btn btn-default">Submit</button> 
</form>

预期结果应如下所示 enter image description here

2 个答案:

答案 0 :(得分:1)

 <form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="firstname">First Name</label>
     <input type="text" class="form-control" id="firstname"  
      placeholder="First Name">
    </div>
  <div class="form-group">
    <label class="sr-only" for="lastname">Last Name</label>
    <input type="text" class="form-control" id="lastname" placeholder="Last 
    Name">
  </div>
 </form>

答案 1 :(得分:0)

这是您可以使用的另一种简单方法......

<div class="container">
    <div class="row">
        <div class="form-group col-md-6">
            <label for="one">One : </label>
            <input type="text" class="form-control" id="one" name="one">
        </div>

        <div class="form-group col-md-6">
            <label for="two" >Two : </label>
            <input type="text" class="form-control" id="name" name="two">
        </div>
    </div>
</div>