Question

我有一个我正在开发的线性组件，我几乎都设置了JSfifiddle：

<div class="row">
  <div class="col-md-6 col-md-offset-3">
<div class="input-group">

  <span class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filter <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
  </span>

   <!--action="{{ url_for('search') }}" method="post">-->
  <input type="text" placeholder="Search..." class="form-control">

  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Go!</button>
  </span>

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

现在，我想要实现的是当我按下Go时实际发布“搜索”！按钮。我没有前端的经验，所以我需要你对这个的帮助，我试着添加，但这打破了引导很棒的外观。

TL; DR。怎么做去！按钮在文本框中发布文本。

Answer 1

您必须在代码中包含表单元素。

<!--Search bar-->
<div class="row" style="margin-top:50px;">
    <div class="col-md-6 col-md-offset-3">
        <form class="navbar-form" method="post" action="{{ url_for('search') }}" role="search">
            <div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Filter
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                    </ul>
                </span>             
                <input type="text" placeholder="Search..." class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">Go!</button>
                </span> 
            </div>
        </form>
    </div>
</div>

请查看JSFiddle

的更新

简单的搜索表单为bootstrap 3

1 个答案: