我有一个带有3个标签的bs3标签面板。我用作搜索按钮的第三个标签。当用户单击选项卡时,它会显示输入的文本框。
我正在尝试将文本框对齐到选项卡的左侧。什么是最好的方法。
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>
答案 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中查看。