Question

布局引导程序有问题。我希望搜索按钮保留在该行的末尾。

这是我的代码：

<form id="frmTest" class="form-inline">
    <div class="form-group">
        <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
    </div>
    <div class="form-group">
        <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
            <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
            <span class="input-group-btn">
            <button class="btn default" type="button">
            <i class="fa fa-calendar"></i>
            </button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
            <input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
            <span class="input-group-btn">
            <button class="btn default" type="button">
            <i class="fa fa-calendar"></i>
            </button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset" >clear</button>
    </div>
</form>
    <button class="btn btn-warning " id="btn-search">Search</button> //this not part form input

输出：

我想要这样的布局：

这怎么解决？

Answer 1

1）将搜索按钮放入表单。

2）如果您不想将搜索按钮放入表单，请尝试以下代码。

只需将form内联。

form {
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<form id="frmTest" class="form-inline">
  <div class="form-group">
    <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
  </div>
  <div class="form-group">
    <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
      <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
      <span class="input-group-btn">
            <button class="btn default" type="button">
            <i class="fa fa-calendar"></i>
            </button>
            </span>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
      <input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
      <span class="input-group-btn">
            <button class="btn default" type="button">
            <i class="fa fa-calendar"></i>
            </button>
            </span>
    </div>
  </div>
  <div class="form-group">
    <button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset">clear</button>

  </div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button>

注意：以整页模式查看输出。

布局表单输入bootstrap

1 个答案: