5

我正在尝试使用 twitter bootstrap 对我的布局进行一些简单的调整，但是使用“input-append”类让我很烦。我确信答案很简单，但我对此很陌生，而且我已经花了很长时间试图找到答案。

我希望文本输入、按钮和 End Text div 在同一行上，并且我希望将按钮附加到文本输入中。

这是我的 jsfiddle：http: //jsfiddle.net/kdavh/azF8w/2/

...专注于按钮周围的 div：

<div class='span2'>
  <input class="btn btn-primary span2" type="submit" value="Search" />
</div>

如果我将其更改为

<div class='span2 input-append'> ...

按钮采用正确的形状，但与文本输入分开

如果我取下 span2 并将其更改为

<div class='input-append'> ...

然后按钮被正确附加，但随后的“结束文本”块被推到下一行。

我将免除您尝试过的所有其他排列。我已经搜索但找不到工作示例。

任何人都可以帮忙吗？

4

2 回答 2

2

请尝试以下代码：

<div class='container'>
    <div class='row'>
        <form>
        <div class='span3 input-append'>
            <input class="span2" id="main_search" type="text" />
            <input class="btn btn-primary" type="button" value="Search" />
        </div>
        <div class='span2'>
            <a class='littleNote' href=''>End Text</a>
        </div>
        </form>
    </div>
</div>
于 2012-11-21T06:01:20.737 回答
0

要向输入元素添加按钮，您需要使用 input-append（或 -prepend）。如

  <div class="input-append">
    <input class="span2" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
  </div>

也显示在此处文档中的“扩展表单控件”下

请记住，附加的按钮会为输入控件添加额外的宽度，也就是说，在为 div 指定 span*-width 时需要考虑到这一点。即在您的 input-append div 上设置一个 span*-width 足够宽以包含输入元素和按钮。Adit 在他的示例中使用 span3 执行此操作。

于 2012-11-21T09:04:02.057 回答