0

我有一个使用 Bootstrap 2 的工具栏：

<div class="btn-toolbar">
  <a class="btn" href="adicionar/">Adicionar cliente</a>
  <form class="pull-right" method="GET">
    <fieldset class="input-append search">
      <input type="text" name="search" id="id_search" class="input-medium" maxlength="200">
      <input type="submit" class="btn btn-group" name="submit_search" value="Buscar">
    </fieldset>
  </form>
</div>

然后根据文档，我应该在 .btn 中添加一个 .btn-default 并将 .input-append 更改为 .input-group。喜欢：

<div class="btn-toolbar">
  <a class="btn btn-default" href="adicionar/">Adicionar cliente</a>
  <fieldset class="input-group search">
    <input type="text" name="search" id="id_search" class="input-medium" maxlength="200">
    <input type="submit" class="btn btn-group" name="submit_search" value="Buscar">
  </fieldset>
</div>

结果简直太可怕了！按钮失去了样式并且不再是内联的。关于如何解决这个问题的任何提示？

4

3 回答 3

1

你可以做这样的事情..注意input-group-btn跨度..

<div class="btn-toolbar">
    <a class="btn btn-default" href="adicionar/">Adicionar cliente</a>
    <div class="col-md-3 input-group pull-right">
      <input type="text" name="search" id="id_search" class="input-medium form-control" maxlength="200">
      <span class="input-group-btn">
        <input type="submit" class="btn btn-group" name="submit_search" value="Buscar">
      </span>
    </div>
</div>

演示：http ://bootply.com/77949

于 2013-08-30T02:02:18.397 回答
0

来自文档：

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

对于按钮工具栏，然后：

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

JSFiddle：http: //jsfiddle.net/SBSgN/1/

那是你要的吗？

于 2013-08-30T01:11:19.707 回答
0

我的最终代码是：

<div class="btn-toolbar">
    <a class="btn btn-default" href="adicionar/">Adicionar cliente</a>
      <form class="col-md-3 input-group pull-right" method="GET">   
      <input type="text" name="search" id="id_search" class="input-medium form-control" maxlength="200">
      <span class="input-group-btn">
        <input type="submit" class="btn btn-group" name="submit_search" value="Buscar">
      </span>
    </form>
</div>

解决了。

于 2013-09-12T00:40:17.023 回答