Question

我有一个使用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>

结果太可怕了！按钮失去了样式，不再内联。有关如何解决的任何提示？

Answer 1

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

<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

Answer 2

来自docs：

<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/

这就是你想要的吗？

Answer 3

我的最终代码是：

<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>

解决。

Btn-toolbar / input-append从Bootstrap 2迁移到3

3 个答案: