Question

我正在尝试使用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'> ...

然后正确添加按钮，但随后将“结束文本”块推送到下一行。

我会饶恕你所尝试过的所有其他排列。我搜索过但找不到一个有效的例子。

有人可以帮忙吗？

Answer 1

请尝试以下代码：

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

Answer 2

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

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

还显示在文档here

中的“扩展表单控件”下

请记住，附加按钮会为输入控件添加额外的宽度，也就是说，在为div指定span * -width时需要考虑哪些因素。即在input-append div上设置span * -width，足以包含input元素和按钮。 Adit在他的例子中用span3做了这个。

bootstrap .input-append trouble

2 个答案: