将文本输入添加到BootStrap 3选项卡

时间:2015-02-06 21:13:31

标签: jquery css twitter-bootstrap

我有一个带有3个标签的bs3标签面板。我用作搜索按钮的第三个标签。当用户单击选项卡时,它会显示输入的文本框。

我正在尝试将文本框对齐到选项卡的左侧。什么是最好的方法。

sample

http://jsfiddle.net/xnmktc54/3/

的实例

以下是我的html示例:

<div role="tabpanel">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#Friends" aria-controls="Friends" role="tab" data-toggle="tab">Friends</a></li>
        <li role="presentation"><a href="#Invite" aria-controls="Invite" role="tab" data-toggle="tab">Invite</a></li>
        <li role="presentation" class="pull-right">
            <input id="xx" type="text" style="display: none; position: absolute;" /><a href="javascript:;" onclick="$('#xx').toggle('fast'); return false;">  <span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
    </ul>


    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="Friends">
            <p>test 1</p>
            <p>test 2</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="Invite">
            <p>test 3</p>
            <p>test 4</p>
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

删除内联css,如果可以的话,不要再使用任何内容。

input#xx{position:absolute};

覆盖bootstrap.min.css:5

.nav-tabs>li>a {display:inline-block};

答案 1 :(得分:0)

一种方法是在css代码中添加“正确:您想要的像素量”。请参阅下面的代码。

<input id="xx" type="text" style="display: none; position: absolute; right:80px;" />

在这个jsfiddle中查看。

http://jsfiddle.net/xnmktc54/11/