Question

我有以下HTML，但我无法将两个输入与所有按钮放在同一行。

<div class="well">
    <div class="input-group">
        <input class="form-control" placeholder="Page path"> 
        <input class="form-control" placeholder="Name"> 
        <div class="input-group-btn">                           
        <a href="#" class="btn btn-info">View</a> 
        <a href="#" class="btn btn-primary">Edit</a> 
        <a href="#" class="btn btn-danger">Delete</a></div>
    </div>
</div>

http://www.bootply.com/Iu7Ic99jm6

Answer 1

Bootstrap使这些输入元素的宽度达到100％。您需要覆盖该值。像这样：

.input-group .form-control {
  width:45%;
  margin-right:5%;
}

在这里查看我的bootply分叉： http://www.bootply.com/ApJNHnX5Lv

Answer 2

将整个内容放在.form-inline <form>标记中，并将输入和按钮部分放在.form-group <div>中：

<div class="well">
      <form class="form-inline">
         <div class="form-group">
            <input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Page path"> 
            <input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Name"> 
         </div>  
         <div class="form-group">                           
            <a href="#" class="btn btn-info">View</a> 
            <a href="#" class="btn btn-primary">Edit</a> 
            <a href="#" class="btn btn-danger">Delete</a>
         </div>
       </form>
</div>

参见forked bootply - ＆gt;的 http://www.bootply.com/xSxTb0xzqh

Answer 3

尝试使用课程form-inline

<div class="well">
  <div class="form-inline">
    <div class="form-group">
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Page path"> 
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Name"> 
      <a href="#" class="btn btn-info">View</a> 
      <a href="#" class="btn btn-primary">Edit</a> 
      <a href="#" class="btn btn-danger">Delete</a>
    </div>
  </div>
</div>

Bootply

Answer 4

你可以使用col div来强制输入在某些地方。与form-inline / form-group like so

组合使用

在输入组中引导两个输入

4 个答案: