Question

我正在使用bootstrap并且很难将以下html输入显示在一个像：

<div class="row">
    <div class="col-sm-8">    
         <div class="form-group">
             <input class="form-control" type="text" name="input1" placeholder="Description"/>
             <input class="form-control" type="text" name="input2" placeholder="Description"/>
         </div>
    </div>
</div>

我已经看到了涉及使用html表的解决方案，我想知道除了诉诸表之外还有另一种方法可以实现这一点。感谢帮助！

Answer 1

尝试将HTML更改为：

<form class="form-inline" role="form">  
     <div class="form-group col-sm-6">
         <input class="form-control" type="text" name="input1" placeholder="Description"/>
     </div>
     <div class="form-group col-sm-6">
         <input class="form-control" type="text" name="input1" placeholder="Description"/>
     </div>
</form>

Demo

Answer 2

阅读回合bootstrap。

网格系统用于通过一系列容纳内容的行和列来创建页面布局。它使用类来格式化其输出。类col-sm-8表示8个垂直列。

使用表格的想法非常古老，因为它不能扩展到使用多个设备而且不能很好地调整大小。

Answer 3

试试这个：

<div class="col-xs-8">
<div class="row">
    <div class="col-xs-6">
        <input class="form-control" type="text" name="input1" placeholder="Description">     
    </div>
    <div class="col-xs-6">
        <input class="form-control" type="text" name="input2" placeholder="Description">
    </div>
</div>   
</div>

In action（务必将其缩小到一个小屏幕，看它不会崩溃）。

Answer 4

从tutorial本身，请注意class="form-inline"

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Bootstrap HTML输入字段在一行中

4 个答案: