Question

我正在尝试在（bootstrap-css）列表中将2个输入字段彼此相邻，但似乎无法正确使用。

这是我到目前为止所拥有的 https://jsfiddle.net/9hrx59bd/

当我将两个输入字段放在同一个输入组中时，删除它：

也没有用

    ...
    </div>
    <div class="input-group ">

如何让它们彼此相邻，并使用全宽？

Answer 1

您需要将两个输入组都设为col-md-6，结果如下：link

<div class="row">
    <form class="form-inline" id="searchform" action=""  accept-charset="utf-8" method="post">
        <div class="input-group  col-md-6 col-sm-6 col-xs-6">
            <input class=" form-control " placeholder="city" id="location"  type="text" name="location">
        </div>
        <div class="input-group  col-md-6 col-sm-6 col-xs-6">
            <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw"  type="text" name="job">
            <span class="input-group-btn">
                <button class="btn btn-danger" type="submit">
                    <span class=" glyphicon glyphicon-search" ></span>
                </button>
            </span>
        </div>
    </form>
</div>

修改我通过添加col-sm-6和col-xs-6使其在较小的屏幕上工作

Answer 2

Bootstrap内联表格

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">




    <form id="searchform" action="" accept-charset="utf-8" method="post">
      <div class="col-md-6">
        <div class=" form-group">
          <input class="form-control" placeholder="city" id="location" type="text" name="location">
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-group input-group">
          <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
          <span class="input-group-btn">
                    <button class="btn btn-danger" type="submit">
                        <span class=" glyphicon glyphicon-search" ></span>
          </button>
          </span>
        </div>
      </div>


    </form>
  </div>
</div>

Answer 3

我认为您只需要form-control和input-group。

<div class="row">
        <div class="col-md-6">
            <form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
                <input class="form-control" placeholder="city" id="location" type="text" name="location">
                <div class="input-group">
                    <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
                    <span class="input-group-btn">
                    <button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </span>
                </div>
            </form>
        </div>
    </div>

Demo

编辑：另一种选择是使用网格列，但删除填充：

.pr-0{
    padding-right:0;
}
.pl-0{
    padding-left:0;
}

<form class="row" id="searchform" action="" accept-charset="utf-8" method="post">
        <div class="col-xs-6 col-sm-3 pr-0">
            <input class="form-control" placeholder="city" id="location" type="text" name="location">
        </div>
        <div class="col-xs-6 col-sm-3 pl-0">
            <div class="input-group">
                <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
                <span class="input-group-btn">
                    <button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </span>
            </div>
        </div>
</form>

请参阅demo

中的第2项

Answer 4

假设您希望input彼此相邻，请参阅代码：

请在整页视图中查看结果。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form action="" class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Password">
  </div>
</form>

＆＃13;

bootstrap3中的内联形式

4 个答案: