twitter-bootstrap – bootstrap .input-append trouble

发布时间：2020-12-17 20:42:42 所属栏目：安全来源：网络整理

导读：我正在尝试使用twitter bootstrap对我的布局进行一些简单的调整,但是使用’input-append’类是困扰我的.我确定答案非常简单,但我是新手,而且我一直在花费太长时间试图找到答案. 我希望文本输入,按钮和结束文本div在同一行,我希望该按钮附加到文本输入. 这是

我正在尝试使用twitter bootstrap对我的布局进行一些简单的调整,但是使用’input-append’类是困扰我的.我确定答案非常简单,但我是新手,而且我一直在花费太长时间试图找到答案.

我希望文本输入,按钮和结束文本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'> ...

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

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

有人可以帮忙吗？

解决方法

请尝试以下代码：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!