Question

解决：JSfiddle 这就是我想要的样本：

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-4">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="year" />
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="month" />
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="day" />
        </div>
        <div class="form-group">
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>

        </div>
      </div>
    </div>
  </div>

    <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-4">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

</form>

的CSS：

.form-inline .form-group {
  margin-left: 0;
  margin-right: 0;
}

END

更新：

我知道我的问题在哪里，但我想要form-horizontal，如果我将其更改为form-inline其他所有内容都搞砸了，请查看更新后的jsfiddle

如何在没有间距的情况下将其内联在一行中，如屏幕截图所示：

<form class="navbar-form form-horizontal" role="search" style="padding:0" _lpchecked="1">
  <div class="form-group col-md-12">
    <label class="col-sm-3 control-label">Location</label>
    <div class="col-md-3">
      <input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
    </div>
    <div class="col-md-3">
      <input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
    </div>
    <div class="col-md-3">
      <input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
    </div>
    <div class="col-md-2">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
</form>

你可以看到输入之间的间距：

JSFiddle

Answer 1

使用form-inline代替form-horizontal：

<form class="navbar-form form-inline" role="search" style="padding:0" _lpchecked="1">
  <div class="form-group">
    <label class="control-label">Location</label>
    <input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
  </div>
  <div class="form-group">
    <input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
  </div>
  <div class="form-group">
    <input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
  </div>
  <div class="form-group">
    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
  </div>
</div>

bootply

Answer 2

简单计算：col-sm-3 * 4 + col-sm-2 == col-sm-14哪个不好。您应该确保每行的总数不会超过 12 cols。

建议 - 将第一个col-sm-3更改为col-sm-1

引导格式内联在一行中

2 个答案: